import { Icon } from '@lobehub/ui';
import { Button, Skeleton, Space } from 'antd';
import { createStyles } from 'antd-style';
import { ChevronUp, CornerDownLeft, LucideCommand, Eraser } from 'lucide-react';
import { rgba } from 'polished';
import { memo, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Center, Flexbox } from 'react-layout-kit';

import StopLoadingIcon from '@/components/StopLoading';
import SaveTopic from '@/features/ChatInput/Topic';
import { useSendMessage } from '@/features/ChatInput/useSend';
import { useChatStore } from '@/store/chat';
import { chatSelectors } from '@/store/chat/selectors';
import { useUserStore } from '@/store/user';
import { preferenceSelectors } from '@/store/user/selectors';
import { isMacOS } from '@/utils/platform';

import LocalFiles from '../FilePreview';
import SendMore from './SendMore';
import {HighlightOutlined, SendOutlined} from "@ant-design/icons";

const useStyles = createStyles(({ css, prefixCls, token }) => {
  return {
    arrow: css`
      &.${prefixCls}-btn.${prefixCls}-btn-icon-only {
        width: 28px;
      }
    `,
    btnDiv: css`
      height: 50%;
      width: 100px;
    `,
    btn: css`
      width: 96px;
      height: 80%;
      margin-top: 10%;
      border: 1px solid #2E62FF !important;
      color: #2E62FF !important;
      font-size: 16px;
    `,
    btnSend: css`
      width: 96px;
      height: 80%;
      margin-top: 10%;
      background: #507BFF !important;
      color: #fff !important;
      font-size: 16px;
    `,
    loadingButton: css`
      display: flex;
      align-items: center;
      width: 96px;
      font-size: 16px;
      height: 80%;
      background: #507BFF !important;
      color: #fff !important;
    `,
    overrideAntdIcon: css`
      .${prefixCls}-btn.${prefixCls}-btn-icon-only {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .${prefixCls}-btn.${prefixCls}-dropdown-trigger {
        &::before {
          background-color: ${rgba(token.colorBgLayout, 0.1)} !important;
        }
      }
    `,
  };
});

interface FooterProps {
  expand: boolean;
  setExpand?: (expand: boolean) => void;
}

const Footer = memo<FooterProps>(({ setExpand, expand, clearClick }) => {
  const { t } = useTranslation('chat');

  const { theme, styles } = useStyles();

  const [isAIGenerating, stopGenerateMessage] = useChatStore((s) => [
    chatSelectors.isAIGenerating(s),
    s.stopGenerateMessage,
  ]);

  const [useCmdEnterToSend] = useUserStore((s) => [preferenceSelectors.useCmdEnterToSend(s)]);

  const { send: sendMessage, canSend } = useSendMessage();

  const [isMac, setIsMac] = useState<boolean>();
  useEffect(() => {
    setIsMac(isMacOS());
  }, [setIsMac]);

  const cmdEnter = (
    <Flexbox gap={2} horizontal>
      {typeof isMac === 'boolean' ? (
        <Icon icon={isMac ? LucideCommand : ChevronUp} />
      ) : (
        <Skeleton.Node active style={{ height: '100%', width: 12 }}>
          {' '}
        </Skeleton.Node>
      )}
      <Icon icon={CornerDownLeft} />
    </Flexbox>
  );

  const enter = (
    <Center>
      <Icon icon={CornerDownLeft} />
    </Center>
  );

  const sendShortcut = useCmdEnterToSend ? cmdEnter : enter;

  const wrapperShortcut = useCmdEnterToSend ? enter : cmdEnter;

  const handleClickClear = () => {
    clearClick()
  }

  return (
    <Flexbox
      align={'end'}
      className={styles.overrideAntdIcon}
      style={{ display: 'inline-block', height: '100%', width: "140px" }}
      distribution={'space-between'}
      flex={'none'}
      gap={8}
      horizontal
      padding={'0 24px'}
    >
      {/*<Flexbox align={'center'} gap={8} horizontal style={{ overflow: 'hidden' }}>*/}
      {/*  {expand && <LocalFiles />}*/}
      {/*</Flexbox>*/}
      {/*<Flexbox align={'center'} flex={'none'} gap={8} horizontal>*/}
        {/*<Flexbox*/}
        {/*  gap={4}*/}
        {/*  horizontal*/}
        {/*  style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}*/}
        {/*>*/}
        {/*  {sendShortcut}*/}
        {/*  <span>{t('input.send')}</span>*/}
        {/*  <span>/</span>*/}
        {/*  {wrapperShortcut}*/}
        {/*  <span>{t('input.warp')}</span>*/}
        {/*</Flexbox>*/}
        {/*<SaveTopic />*/}
        {/*<Flexbox style={{ minWidth: 92 }}>*/}
        <div className={styles.btnDiv}>
          <Button className={styles.btn} onClick={() => handleClickClear()}>
            <div><HighlightOutlined style={{ fontSize: "20px"}} /></div>
            {t('input.clear')}
          </Button>
        </div>
        {/*</Flexbox>*/}
        {/*<Flexbox style={{ minWidth: 92 }}>*/}
        <div className={styles.btnDiv}>
          {isAIGenerating ? (
            <Button
              className={styles.loadingButton}
              icon={<StopLoadingIcon />}
              onClick={stopGenerateMessage}
            >
              {t('input.stop')}
            </Button>
          ) : (
            <Space.Compact style={{ height: '100%' }}>
              <Button
                className={styles.btnSend}
                disabled={!canSend}
                loading={!canSend}
                onClick={() => {
                  sendMessage();
                  setExpand?.(false);
                }}
              >
                <div><SendOutlined style={{ fontSize: "20px"}} /></div>
                {t('input.send')}
              </Button>
              {/*<SendMore disabled={!canSend} isMac={isMac} />*/}
            </Space.Compact>
          )}
        </div>
        {/*</Flexbox>*/}
      {/*</Flexbox>*/}
    </Flexbox>
  );
});

Footer.displayName = 'Footer';

export default Footer;
