import { Divider } from 'components/divider';
import { Fab } from 'components/fab';
import { Row } from 'components/layout';
import { Bold, Coding, Italic, Link, StrikeThrough, UnderLine } from 'icons';
import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';

export const TopAction: FC<TopActionProps> = ({
  isBold,
  isItalic,
  isUnderLine,
  isStrikeThrough,
  isCode,
  setIsBold,
  setIsItalic,
  setIsUnderLine,
  setIsStrikeThrough,
  setIsCode,
  openLink,
}) => {
  const handleBold = useCallback(() => {
    setIsBold(!isBold);
  }, [isBold, setIsBold]);

  const handleItalic = useCallback(() => {
    setIsItalic(!isItalic);
  }, [isItalic, setIsItalic]);

  const handleUnderLine = useCallback(() => {
    setIsUnderLine(!isUnderLine);
    if (!isUnderLine) {
      setIsStrikeThrough(false);
    }
  }, [isUnderLine, setIsStrikeThrough, setIsUnderLine]);

  const handleStrikeThrough = useCallback(() => {
    setIsStrikeThrough(!isStrikeThrough);
    if (!isStrikeThrough) {
      setIsUnderLine(false);
    }
  }, [isStrikeThrough, setIsStrikeThrough, setIsUnderLine]);

  const handleCode = useCallback(() => {
    setIsCode(!isCode);
  }, [isCode, setIsCode]);

  const actions = useMemo(
    () => [
      {
        id: 1,
        isActive: isBold,
        onPress: handleBold,
        icon: <Bold />,
      },
      {
        id: 2,
        isActive: isItalic,
        onPress: handleItalic,
        icon: <Italic />,
      },
      {
        id: 3,
        isActive: isUnderLine,
        onPress: handleUnderLine,
        icon: <UnderLine />,
      },
      {
        id: 4,
        isActive: isStrikeThrough,
        onPress: handleStrikeThrough,
        icon: <StrikeThrough />,
      },
    ],
    [
      handleBold,
      handleItalic,
      handleStrikeThrough,
      handleUnderLine,
      isBold,
      isItalic,
      isStrikeThrough,
      isUnderLine,
    ]
  );

  const linkActions = useMemo(
    () => [
      {
        id: 5,
        onPress: openLink,
        isActive: false,
        icon: <Link />,
      },
      {
        id: 6,
        onPress: handleCode,
        isActive: isCode,
        icon: <Coding />,
      },
    ],
    [handleCode, openLink, isCode]
  );

  const getColor = useCallback((isActive) => {
    return isActive ? 'base-02' : 'transparent';
  }, []);

  return (
    <Row backgroundColor="base-02-hover">
      <Row py="3xs" px="2xs" alignItems="center">
        {actions.map((action) => (
          <Fab
            key={action.id}
            onPress={action.onPress}
            variant="plain"
            shapeVariant="round"
            sizeVariant="small"
            mr="3xs"
            colorVariant={getColor(action.isActive)}
            hoverColorVariant="base-02"
            centerElement={action.icon}
          />
        ))}

        <Divider
          colorVariant="divider-02"
          size={1}
          height={20}
          ml="3xs"
          mr="2xs"
          alignSelf="center"
          directionVariant="vertical"
        />

        {linkActions.map((action) => (
          <Fab
            key={action.id}
            onPress={action.onPress}
            variant="plain"
            shapeVariant="round"
            sizeVariant="small"
            mr="3xs"
            colorVariant={getColor(action.isActive)}
            hoverColorVariant="base-02"
            centerElement={action.icon}
          />
        ))}
      </Row>
    </Row>
  );
};
export interface TopActionProps {
  isBold: boolean;
  isItalic: boolean;
  isCode: boolean;
  isUnderLine: boolean;
  isStrikeThrough: boolean;
  openLink: () => void;
  setIsBold: Dispatch<SetStateAction<boolean>>;
  setIsItalic: Dispatch<SetStateAction<boolean>>;
  setIsCode: Dispatch<SetStateAction<boolean>>;
  setIsUnderLine: Dispatch<SetStateAction<boolean>>;
  setIsStrikeThrough: Dispatch<SetStateAction<boolean>>;
}