import React from "react";
import classes from "./classes.module.scss";
import classNames from "classnames";

type IProps = {
	typo: ETypo;
	children: React.ReactNode;
	color?: ETypoColor;
	className?: string;
	title?: string;
};

export enum ETypo {
	DISPLAY_LARGE = "display-large",
	DISPLAY_MEDIUM = "display-medium",
	DISPLAY_SMALL = "display-small",

	TITLE_H1 = "title-h1",
	TITLE_H2 = "title-h2",
	TITLE_H3 = "title-h3",
	TITLE_H4 = "title-h4",
	TITLE_H5 = "title-h5",
	TITLE_H6 = "title-h6",

	TEXT_LG_BOLD = "text-lg-bold",
	TEXT_LG_SEMIBOLD = "text-lg-semibold",
	TEXT_LG_REGULAR = "text-lg-regular",
	TEXT_LG_UPPERCASE = "text-lg-uppercase",
	TEXT_LG_light = "text-lg-light",

	TEXT_MD_BOLD = "text-md-bold",
	TEXT_MD_SEMIBOLD = "text-md-semibold",
	TEXT_MD_REGULAR = "text-md-regular",
	TEXT_MD_UPPERCASE = "text-md-uppercase",
	TEXT_MD_light = "text-md-light",

	TEXT_SM_BOLD = "text-sm-bold",
	TEXT_SM_SEMIBOLD = "text-sm-semibold",
	TEXT_SM_REGULAR = "text-sm-regular",
	TEXT_SM_UPPERCASE = "text-sm-uppercase",
	TEXT_SM_light = "text-sm-light",

	TEXT_XS_BOLD = "text-xs-bold",
	TEXT_XS_SEMIBOLD = "text-xs-semibold",
	TEXT_XS_REGULAR = "text-xs-regular",
	TEXT_XS_UPPERCASE = "text-xs-uppercase",
	TEXT_XS_light = "text-xs-light",

	CAPTION_BOLD = "caption-bold",
	CAPTION_SEMIBOLD = "caption-semibold",
	CAPTION_REGULAR = "caption-regular",
	CAPTION_UPPERCASE = "caption-uppercase",
	CAPTION_LIGHT = "caption-light",
}

export enum ETypoColor {
	COLOR_GENERIC_BLACK = "--color-generic-black",
	COLOR_GENERIC_WHITE = "--color-generic-white",
	COLOR_GENERIC_NONE = "--color-generic-none",

	COLOR_NEUTRAL_50 = "--color-neutral-50",
	COLOR_NEUTRAL_100 = "--color-neutral-100",
	COLOR_NEUTRAL_200 = "--color-neutral-200",
	COLOR_NEUTRAL_300 = "--color-neutral-300",
	COLOR_NEUTRAL_400 = "--color-neutral-400",
	COLOR_NEUTRAL_500 = "--color-neutral-500",
	COLOR_NEUTRAL_600 = "--color-neutral-600",
	COLOR_NEUTRAL_700 = "--color-neutral-700",
	COLOR_NEUTRAL_800 = "--color-neutral-800",
	COLOR_NEUTRAL_900 = "--color-neutral-900",
	COLOR_NEUTRAL_950 = "--color-neutral-950",

	COLOR_PRIMARY_50 = "--color-primary-50",
	COLOR_PRIMARY_100 = "--color-primary-100",
	COLOR_PRIMARY_200 = "--color-primary-200",
	COLOR_PRIMARY_300 = "--color-primary-300",
	COLOR_PRIMARY_400 = "--color-primary-400",
	COLOR_PRIMARY_500 = "--color-primary-500",
	COLOR_PRIMARY_600 = "--color-primary-600",
	COLOR_PRIMARY_700 = "--color-primary-700",
	COLOR_PRIMARY_800 = "--color-primary-800",
	COLOR_PRIMARY_900 = "--color-primary-900",
	COLOR_PRIMARY_950 = "--color-primary-950",

	COLOR_SECONDARY_50 = "--color-secondary-50",
	COLOR_SECONDARY_100 = "--color-secondary-100",
	COLOR_SECONDARY_200 = "--color-secondary-200",
	COLOR_SECONDARY_300 = "--color-secondary-300",
	COLOR_SECONDARY_400 = "--color-secondary-400",
	COLOR_SECONDARY_500 = "--color-secondary-500",
	COLOR_SECONDARY_600 = "--color-secondary-600",
	COLOR_SECONDARY_700 = "--color-secondary-700",
	COLOR_SECONDARY_800 = "--color-secondary-800",
	COLOR_SECONDARY_900 = "--color-secondary-900",
	COLOR_SECONDARY_950 = "--color-secondary-950",

	COLOR_ERROR_50 = "--color-error-50",
	COLOR_ERROR_100 = "--color-error-100",
	COLOR_ERROR_200 = "--color-error-200",
	COLOR_ERROR_300 = "--color-error-300",
	COLOR_ERROR_400 = "--color-error-400",
	COLOR_ERROR_500 = "--color-error-500",
	COLOR_ERROR_600 = "--color-error-600",
	COLOR_ERROR_700 = "--color-error-700",
	COLOR_ERROR_800 = "--color-error-800",
	COLOR_ERROR_900 = "--color-error-900",
	COLOR_ERROR_950 = "--color-error-950",

	COLOR_WARNING_50 = "--color-warning-50",
	COLOR_WARNING_100 = "--color-warning-100",
	COLOR_WARNING_200 = "--color-warning-200",
	COLOR_WARNING_300 = "--color-warning-300",
	COLOR_WARNING_400 = "--color-warning-400",
	COLOR_WARNING_500 = "--color-warning-500",
	COLOR_WARNING_700 = "--color-warning-700",
	COLOR_WARNING_800 = "--color-warning-800",
	COLOR_WARNING_900 = "--color-warning-900",
	COLOR_WARNING_950 = "--color-warning-950",

	COLOR_SUCCESS_50 = "--color-success-50",
	COLOR_SUCCESS_100 = "--color-success-100",
	COLOR_SUCCESS_200 = "--color-success-200",
	COLOR_SUCCESS_300 = "--color-success-300",
	COLOR_SUCCESS_400 = "--color-success-400",
	COLOR_SUCCESS_500 = "--color-success-500",
	COLOR_SUCCESS_600 = "--color-success-600",
	COLOR_SUCCESS_700 = "--color-success-700",
	COLOR_SUCCESS_800 = "--color-success-800",
	COLOR_SUCCESS_900 = "--color-success-900",
	COLOR_SUCCESS_950 = "--color-success-950",

	COLOR_INFO_50 = "--color-info-50",
	COLOR_INFO_100 = "--color-info-100",
	COLOR_INFO_200 = "--color-info-200",
	COLOR_INFO_300 = "--color-info-300",
	COLOR_INFO_400 = "--color-info-400",
	COLOR_INFO_500 = "--color-info-500",
	COLOR_INFO_700 = "--color-info-700",
	COLOR_INFO_800 = "--color-info-800",
	COLOR_INFO_900 = "--color-info-900",
	COLOR_INFO_950 = "--color-info-950",
}

export default function Typography(props: IProps) {
	const { typo, color, className, title, children } = props;

	const style = color ? ({ "--data-color": `var(${color})` } as React.CSSProperties) : undefined;

	return (
		<div className={classNames(classes["root"], classes[typo], className)} style={style} title={title}>
			{children}
		</div>
	);
}