import React from "react";
import {
  DoubleQuotationMarksForEnding,
  DoubleQuotationMarksForStarting,
} from "../../UI/Icon";
import {
  EmphasizeContentStyleOptions,
  IEmphasizeDecorationPropsType,
  TEmphasizeContentStylePresetType,
} from "./EmphasizeContent.types";

export const EmphasizeStylePreset = {
  EXTRA_BOLD_POINT: "ExtraBoldPoint",
  BORDER_TOP_BOTTOM: "BorderTopBottom",
  THICK_BORDER_LEFT: "ThickBorderLeft",
  BLUE_QUESTION_BUBBLE: "BlueQuestionBubble",
  VERTICAL_COMMA: "VerticalComma",
  HORIZONTAL_COMMA: "HorizontalComma",
  SQUARE_BORDER: "SquareBorder",
} as const;

export const LegacyEmphasizeStylePreset = {
  BAR_WITH_POINT: "bar-with-point",
  COMMA: "comma",
  SQUARE_BORDER: "square-border",
  TWO_LINE: "two-line",
  CIRCLES: "circles",
} as const;

const emphasizeContentStylePresetMap: {
  [key in TEmphasizeContentStylePresetType]: EmphasizeContentStyleOptions;
} = {
  [EmphasizeStylePreset.EXTRA_BOLD_POINT]: {
    contentWrapperClassName: "flex space-x-[0.625rem] p-[1rem]",
    symbolColor: "#1a1a1a",
    backgroundColor: "#E8F2FF",
    BeforeContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <span
        className={`pt-1 text-[3rem] font-extrabold leading-none`}
        style={{ color: symbolColor }}
      >
        *
      </span>
    ),
  },
  [EmphasizeStylePreset.BORDER_TOP_BOTTOM]: {
    contentWrapperClassName:
      "flex place-content-center place-items-center relative z-0 p-[1.8rem]",
    BeforeContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <div
        className={`absolute top-0 left-0 h-full w-full border-y-4`}
        style={{ borderColor: symbolColor }}
      />
    ),
    symbolColor: "#000000",
    backgroundColor: "#FFFFFF",
    textCenter: true,
  },
  [EmphasizeStylePreset.THICK_BORDER_LEFT]: {
    contentWrapperClassName: "flex relative z-0 p-[1rem]",
    BeforeContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <div
        className="absolute top-0 left-0 h-full border-l-4"
        style={{ borderColor: symbolColor }}
      />
    ),
    symbolColor: "#000000",
    backgroundColor: "#F9F9F9",
  },
  [EmphasizeStylePreset.BLUE_QUESTION_BUBBLE]: {
    contentWrapperClassName:
      "relative flex place-content-center place-items-center rounded-[10px] p-[1rem]",
    symbolColor: "#E8F2FF",
    backgroundColor: "#E8F2FF",
    AfterContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <div
        className={`absolute bottom-0 left-[50%] h-4 w-4 translate-y-[50%] -translate-x-[100%] rotate-45 content-['']`}
        style={{ backgroundColor: symbolColor }}
      />
    ),
    textCenter: true,
  },
  [EmphasizeStylePreset.VERTICAL_COMMA]: {
    contentWrapperClassName:
      "flex flex-col place-content-center place-items-center p-[1rem]",
    symbolColor: "#88b8ff",
    BeforeContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <div className="py-[1rem]">
        <DoubleQuotationMarksForStarting size="1.5rem" color={symbolColor} />
      </div>
    ),
    AfterContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <div className="py-[1rem]">
        <DoubleQuotationMarksForEnding size="1.5rem" color={symbolColor} />
      </div>
    ),
    textCenter: true,
  },
  [EmphasizeStylePreset.HORIZONTAL_COMMA]: {
    contentWrapperClassName:
      "flex place-content-between place-items-center p-[1rem] min-h-[80px]",
    backgroundColor: "#ffffff",
    symbolColor: "#88b8ff",
    BeforeContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <DoubleQuotationMarksForStarting size="1.5rem" color={symbolColor} />
    ),
    AfterContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <DoubleQuotationMarksForEnding size="1.5rem" color={symbolColor} />
    ),
    textCenter: true,
  },
  [EmphasizeStylePreset.SQUARE_BORDER]: {
    contentWrapperClassName:
      "relative flex place-content-center place-items-center min-h-[89px] p-[1.25rem]",
    backgroundColor: "#F9F9F9",
    symbolColor: "#000000",
    BeforeContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <div
        className={`absolute top-[-1.5px] left-[-1.5px] h-[30%] w-[60%] border-l-[3px] border-t-[3px]`}
        style={{ borderColor: symbolColor }}
      />
    ),
    AfterContent: ({ symbolColor }: IEmphasizeDecorationPropsType) => (
      <div
        className={`absolute bottom-[-1.5px] right-[-1.5px] h-[30%] w-[60%] border-r-[3px] border-b-[3px]`}
        style={{ borderColor: symbolColor }}
      />
    ),
    textCenter: true,
  },
};

export default emphasizeContentStylePresetMap;