import { type ReactElement } from 'react';
import { useTranslation } from 'react-i18next';

import { Divider, Stack, useTheme } from '@mui/material';

import AlignCenter from '../actions/AlignCenter';
import AlignJustify from '../actions/AlignJustify';
import AlignLeft from '../actions/AlignLeft';
import AlignRight from '../actions/AlignRight';
import BlockQuote from '../actions/BlockQuote';
import Bold from '../actions/Bold';
import ClearFormat from '../actions/ClearFormat';
import Code from '../actions/Code';
import EmbedHTML from '../actions/EmbedHTML';
import EmbedVideo from '../actions/EmbedVideo';
import HighlightColor from '../actions/HighlightColor';
import Indent from '../actions/Indent';
import InsertEmoji from '../actions/InsertEmoji';
import InsertImage from '../actions/InsertImage';
import InsertLink from '../actions/InsertLink';
import Italics from '../actions/Italics';
import OrderedList from '../actions/OrderedList';
import Outdent from '../actions/Outdent';
import ParagraphStyle from '../actions/ParagraphStyle';
import SetFontFamily from '../actions/SetFontFamily';
import SetFontSize from '../actions/SetFontSize';
import Strike from '../actions/Strike';
import Table from '../actions/Table';
import TextColor from '../actions/TextColor';
import Underline from '../actions/Underline';
import UnorderedList from '../actions/UnorderedList';
import UploadVideo from '../actions/UploadVideo';
import { useTextArea } from '../context';
import { type ActionId, type ActionsBarProps } from '../types';

import ActionDivider from './ActionDivider';

const ActionsBar = ({
  simplifyEditor,
  actions = {},
  visibleActions,
}: ActionsBarProps) => {
  const { editor, slotProps } = useTextArea();

  const theme = useTheme();
  const { t } = useTranslation('material_hu_only');

  if (!editor || !editor.isEditable) {
    return null;
  }

  const { table, embedHTML, insertEmoji } = actions;

  if (visibleActions) {
    const actionComponentMap: Record<
      Exclude<ActionId, 'insertVariable'>,
      ReactElement
    > = {
      bold: <Bold title={t('top_bar_rich_text_editor.bold')} />,
      italic: <Italics title={t('top_bar_rich_text_editor.italic')} />,
      underline: <Underline title={t('top_bar_rich_text_editor.underline')} />,
      strike: <Strike title={t('top_bar_rich_text_editor.strike')} />,
      code: <Code title={t('top_bar_rich_text_editor.code')} />,
      blockquote: (
        <BlockQuote title={t('top_bar_rich_text_editor.blockquote')} />
      ),
      textColor: <TextColor title={t('top_bar_rich_text_editor.text_color')} />,
      highlightColor: (
        <HighlightColor title={t('top_bar_rich_text_editor.highlight_color')} />
      ),
      clearFormat: (
        <ClearFormat title={t('top_bar_rich_text_editor.clear_format')} />
      ),
      fontFamily: <SetFontFamily />,
      fontSize: <SetFontSize />,
      paragraphStyle: <ParagraphStyle />,
      alignLeft: <AlignLeft title={t('top_bar_rich_text_editor.align_left')} />,
      alignCenter: (
        <AlignCenter title={t('top_bar_rich_text_editor.align_center')} />
      ),
      alignRight: (
        <AlignRight title={t('top_bar_rich_text_editor.align_right')} />
      ),
      alignJustify: (
        <AlignJustify title={t('top_bar_rich_text_editor.align_justify')} />
      ),
      orderedList: (
        <OrderedList title={t('top_bar_rich_text_editor.ordered_list')} />
      ),
      unorderedList: (
        <UnorderedList title={t('top_bar_rich_text_editor.bullet_list')} />
      ),
      indent: <Indent title={t('top_bar_rich_text_editor.indent')} />,
      outdent: <Outdent title={t('top_bar_rich_text_editor.outdent')} />,
      insertEmoji: (
        <InsertEmoji title={t('top_bar_rich_text_editor.insert_emoji')} />
      ),
      insertLink: <InsertLink title={t('top_bar_rich_text_editor.link')} />,
      insertImage: (
        <InsertImage
          title={t('top_bar_rich_text_editor.insert_image')}
          {...slotProps?.insertImage}
        />
      ),
      embedVideo: (
        <EmbedVideo
          title={t('top_bar_rich_text_editor.embed_video')}
          {...slotProps?.embedVideo}
        />
      ),
      embedHTML: (
        <EmbedHTML
          title={t('top_bar_rich_text_editor.embed_html')}
          {...slotProps?.embedHTML}
        />
      ),
      uploadVideo: (
        <UploadVideo
          title={t('top_bar_rich_text_editor.upload_video')}
          {...slotProps?.uploadVideo}
        />
      ),
      table: <Table title={t('top_bar_rich_text_editor.table')} />,
    };

    return (
      <Stack
        className="text-area-actions-bar"
        sx={{
          p: 1,
          pb: 0,
          backgroundColor: 'inherit',
          position: 'sticky',
          top: 0,
          zIndex: 1,
          borderTopLeftRadius: 'inherit',
          borderTopRightRadius: 'inherit',
        }}
      >
        <Stack
          sx={{
            backgroundColor: theme.palette.new.background.layout.default,
            borderRadius: 1,
            color: theme.palette.new.text.neutral.default,
            p: 1,
          }}
        >
          <Stack sx={{ flexDirection: 'row', gap: 1, flexWrap: 'wrap' }}>
            {visibleActions
              .filter(
                (id): id is Exclude<ActionId, 'insertVariable'> =>
                  id !== 'insertVariable',
              )
              .map(actionId => (
                <span key={actionId}>{actionComponentMap[actionId]}</span>
              ))}
          </Stack>
        </Stack>
      </Stack>
    );
  }

  return (
    <Stack
      className="text-area-actions-bar"
      sx={{
        p: 1,
        pb: 0,
        backgroundColor: 'inherit',
        position: 'sticky',
        top: 0,
        zIndex: 1,
        borderTopLeftRadius: 'inherit',
        borderTopRightRadius: 'inherit',
      }}
    >
      <Stack
        sx={{
          gap: 1,
          backgroundColor: theme.palette.new.background.layout.default,
          borderRadius: 2,
          color: theme.palette.new.text.neutral.default,
          p: 1,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            gap: 1,
            justifyContent: 'space-between',
            flexWrap: 'wrap',
          }}
        >
          <Stack sx={{ flexDirection: 'row', gap: 1, flexWrap: 'wrap' }}>
            <Bold title={t('top_bar_rich_text_editor.bold')} />
            <Italics title={t('top_bar_rich_text_editor.italic')} />
            <Underline title={t('top_bar_rich_text_editor.underline')} />
            <Strike title={t('top_bar_rich_text_editor.strike')} />
            <ActionDivider />
            <Code title={t('top_bar_rich_text_editor.code')} />
            {table && <Table title={t('top_bar_rich_text_editor.table')} />}
            <BlockQuote title={t('top_bar_rich_text_editor.blockquote')} />
            <ActionDivider />
            <TextColor title={t('top_bar_rich_text_editor.text_color')} />
            <HighlightColor
              title={t('top_bar_rich_text_editor.highlight_color')}
            />
            <ClearFormat title={t('top_bar_rich_text_editor.clear_format')} />
          </Stack>
          {!simplifyEditor && (
            <Stack sx={{ flexDirection: 'row', gap: 1, flexWrap: 'wrap' }}>
              <SetFontFamily />
              <SetFontSize />
              <ParagraphStyle />
            </Stack>
          )}
        </Stack>
        {!simplifyEditor && (
          <>
            <Divider />
            <Stack
              sx={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                gap: 1,
                justifyContent: 'space-between',
              }}
            >
              <Stack sx={{ flexDirection: 'row', gap: 1, flexWrap: 'wrap' }}>
                <AlignLeft title={t('top_bar_rich_text_editor.align_left')} />
                <AlignCenter
                  title={t('top_bar_rich_text_editor.align_center')}
                />
                <AlignRight title={t('top_bar_rich_text_editor.align_right')} />
                <AlignJustify
                  title={t('top_bar_rich_text_editor.align_justify')}
                />
                <ActionDivider />
                <OrderedList
                  title={t('top_bar_rich_text_editor.ordered_list')}
                />
                <UnorderedList
                  title={t('top_bar_rich_text_editor.bullet_list')}
                />
                <Indent title={t('top_bar_rich_text_editor.indent')} />
                <Outdent title={t('top_bar_rich_text_editor.outdent')} />
                <ActionDivider />
                {insertEmoji && (
                  <InsertEmoji
                    title={t('top_bar_rich_text_editor.insert_emoji')}
                  />
                )}
              </Stack>

              <Stack sx={{ flexDirection: 'row', gap: 1, flexWrap: 'wrap' }}>
                <InsertLink title={t('top_bar_rich_text_editor.link')} />
                {embedHTML && (
                  <EmbedHTML
                    title={t('top_bar_rich_text_editor.embed_html')}
                    {...slotProps?.embedHTML}
                  />
                )}
                <EmbedVideo
                  title={t('top_bar_rich_text_editor.embed_video')}
                  {...slotProps?.embedVideo}
                />
                <InsertImage
                  title={t('top_bar_rich_text_editor.insert_image')}
                  {...slotProps?.insertImage}
                />
                <UploadVideo
                  title={t('top_bar_rich_text_editor.upload_video')}
                  {...slotProps?.uploadVideo}
                />
              </Stack>
            </Stack>
          </>
        )}
      </Stack>
    </Stack>
  );
};

export default ActionsBar;
