import { Button, Space } from 'antd';
import { createStyles } from 'antd-style';
import { rgba } from 'polished';
import { Suspense, memo, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Flexbox } from 'react-layout-kit';

import StopLoadingIcon from '@/components/StopLoading';
import LocalFiles from '@/features/ChatInput/Desktop/FilePreview';
import SaveTopic from '@/features/ChatInput/Topic';
import { useSendMessage } from '@/features/ChatInput/useSend';
import { useChatStore } from '@/store/chat';
import { chatSelectors } from '@/store/chat/selectors';
import { isMacOS } from '@/utils/platform';
import {HighlightOutlined, SendOutlined} from "@ant-design/icons";

import MessageFromUrl from './MessageFromUrl';
import SendMore from './SendMore';
import ShortcutHint from './ShortcutHint';

const useStyles = createStyles(({ css, prefixCls, token }) => {
  return {
    arrow: css`
      &.${prefixCls}-btn.${prefixCls}-btn-icon-only {
        width: 28px;
      }
    `,
    btn: css`
      width: 106px;
      border: 1px solid #2E62FF !important;
      color: #2E62FF !important;
      font-size: 16px;
    `,
    btnSend: css`
      width: 106px;
      background: #507BFF !important;
      color: #fff !important;
      font-size: 16px;
    `,
    loadingButton: css`
      width: 106px;
      display: flex;
      background: #507BFF !important;
      color: #fff !important;
      align-items: center;
    `,
    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;
  onExpandChange: (expand: boolean) => void;
  clearClick: () => void
}

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

  const { styles } = useStyles();

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

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

  const [isMac, setIsMac] = useState<boolean>();

  useEffect(() => {
    setIsMac(isMacOS());
  }, [setIsMac]);

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

  return (
    <>
      <Suspense fallback={null}>
        <MessageFromUrl />
      </Suspense>
      <Flexbox
        align={'end'}
        className={styles.overrideAntdIcon}
        distribution={'space-between'}
        flex={'none'}
        gap={8}
        horizontal
        padding={'0 24px'}
        style={{ display: 'inline-block', height: "90px", width: "100%", textAlign: 'right' }}
      >
      {/*  <Flexbox align={'center'} gap={8} horizontal style={{ overflow: 'hidden' }}>*/}
      {/*    {expand && <LocalFiles />}*/}
      {/*  </Flexbox>*/}
      {/*  <Flexbox align={'center'} flex={'none'} gap={8} horizontal>*/}
      {/*    <ShortcutHint />*/}
      {/*    <SaveTopic />*/}
      {/*    <Flexbox style={{ minWidth: 92 }}>*/}
        <div style={{ display: 'inline-block', marginRight: '20px'}}>
          <Button className={styles.btn} onClick={() => handleClickClear()}>
            <div><HighlightOutlined style={{ fontSize: "20px"}} /></div>
            {t('input.clear')}
          </Button>
        </div>
        <div style={{ display: 'inline-block'}}>
          {isAIGenerating ? (
            <Button
              className={styles.loadingButton}
              icon={<StopLoadingIcon />}
              onClick={stopGenerateMessage}
            >
              {t('input.stop')}
            </Button>
          ) : (
            <Space.Compact>
              <Button
                className={styles.btnSend}
                disabled={!canSend}
                loading={!canSend}
                onClick={() => {
                  sendMessage();
                  onExpandChange?.(false);
                }}
                type={'primary'}
              >
                <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;
