import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { Divider } from 'components/divider';
import { Fab } from 'components/fab';
import { Row } from 'components/layout';
import { Visible } from 'components/visible';
import { useResponsiveLayout } from 'hooks';
import { At, Attach, MicroPhone, PaperPlan, SmilingOutline, Text, VideoCameraOutline } from 'icons';
import { CLEAR_EDITOR_COMMAND, EditorState } from 'lexical';

import { FC, useCallback, useEffect, useState } from 'react';
import { RichTextVariant } from '../Types';

export const BottomAction: FC<BottomActionProps> = ({ variant, onSendMessage }) => {
  const [editor] = useLexicalComposerContext();
  const { isMobile } = useResponsiveLayout();
  const [isMessage, setIsMessage] = useState(false);
  const isSmall = variant === 'comment' || isMobile;

  const handleSendMessage = useCallback(() => {
    onSendMessage(editor.getEditorState());
    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
    editor.focus();
  }, [editor, onSendMessage]);

  const colorVariant = isMessage ? 'primary' : 'base-02';
  const iconColor = isMessage ? 'white' : 'body';
  const onPressSend = isMessage ? handleSendMessage : undefined;
  const hoverColor = isMessage ? 'primary-hover' : 'base-02-hover';

  const attachActions = [
    {
      id: 1,
      icon: <Attach colorVariant="body" height={16} width={16} />,
    },
  ];

  const mediaActions = [
    {
      id: 1,
      icon: <VideoCameraOutline colorVariant="body" height={16} width={16} />,
    },
    {
      id: 2,
      icon: <MicroPhone colorVariant="body" height={16} width={16} />,
    },
  ];

  const atActions = [
    {
      id: 1,
      icon: <At colorVariant="body" height={16} width={16} />,
    },
    {
      id: 2,
      icon: <SmilingOutline colorVariant="body" height={16} width={16} />,
    },
  ];

  useEffect(() => {
    const removeTextContentListener = editor.registerTextContentListener((textContent) => {
      if (textContent) {
        if (!isMessage) {
          setIsMessage(true);
        }
      } else {
        if (isMessage) {
          setIsMessage(false);
        }
      }
    });

    return () => {
      removeTextContentListener();
    };
  }, [editor, isMessage]);

  return (
    <Row px="xs" height={40} alignItems="center" justifyContent="space-between">
      <Row>
        {attachActions.map((action) => (
          <Fab
            key={action.id}
            onPress={() => {}}
            variant="plain"
            shapeVariant="round"
            sizeVariant="small"
            colorVariant="transparent"
            hoverColorVariant="base-02"
            centerElement={action.icon}
          />
        ))}
        <Visible if={!isSmall}>
          <Divider
            colorVariant="divider-02"
            size={1}
            height={20}
            mx="2xs"
            alignSelf="center"
            directionVariant="vertical"
          />
        </Visible>
        {mediaActions.map((action) => (
          <Fab
            key={action.id}
            onPress={() => {}}
            variant="plain"
            shapeVariant="round"
            sizeVariant="small"
            colorVariant="transparent"
            hoverColorVariant="base-02"
            centerElement={action.icon}
          />
        ))}
        <Visible if={!isSmall}>
          <Divider
            colorVariant="divider-02"
            size={1}
            height={20}
            mx="2xs"
            alignSelf="center"
            directionVariant="vertical"
          />
        </Visible>

        {atActions.map((action) => (
          <Fab
            key={action.id}
            onPress={() => {}}
            variant="plain"
            shapeVariant="round"
            sizeVariant="small"
            colorVariant="transparent"
            hoverColorVariant="base-02"
            centerElement={action.icon}
          />
        ))}
        <Visible if={isSmall}>
          <Fab
            onPress={() => {}}
            variant="plain"
            shapeVariant="round"
            sizeVariant="small"
            colorVariant="transparent"
            centerElement={<Text colorVariant="body" />}
          />
        </Visible>
      </Row>
      <Fab
        variant="plain"
        shapeVariant="round"
        sizeVariant="small"
        colorVariant={colorVariant}
        onPress={onPressSend}
        hoverColorVariant={hoverColor}
        centerElement={<PaperPlan colorVariant={iconColor} />}
      />
    </Row>
  );
};
export interface BottomActionProps {
  variant: RichTextVariant;
  onSendMessage: (editorState: EditorState) => void;
}