import logoSvg from '../../assets/logo.svg';
import copySvg from '../../assets/copy.svg';
import { Button, Col, Grid, Row, message } from 'antd';
import styles from './index.less';
import classNames from 'classnames';
import { CopyOutlined } from '@ant-design/icons';

interface IAnswerProps {
  answerValue: string;
  onRetry?: () => void;
}

const { useBreakpoint } = Grid;

const Answer = (props: IAnswerProps) => {
  const { answerValue, onRetry } = props;

  const screens = useBreakpoint();
  const isMobile = screens.xs;

  function copy() {
    navigator.clipboard
      .writeText(answerValue)
      .then(() => {
        message.success('已复制');
      })
      .catch(() => {
        message.error('复制失败');
      });
  }

  return (
    <Col span={24}>
      <Row>
        <Col span={24}>
          <p className={styles.question} style={{ marginTop: isMobile ? '20px' : '40px' }}>
            <img src={logoSvg} alt="" className={styles.question_img} />
            <span
              className={classNames(isMobile && styles.mobile_question_span, styles.question_span)}
              style={{ marginLeft: isMobile ? '8px' : '16px' }}
            >
              回答如下：
            </span>
          </p>
        </Col>
        <Col span={24} className={styles.chat}>
          <div className={classNames(styles.answer, isMobile && styles.mobile_answer)}>
            <div className={styles.answer}>
              {!answerValue ? (
                <p style={{ color: '#666666' }}>请耐心等待3-5秒~</p>
              ) : (
                <p dangerouslySetInnerHTML={{ __html: answerValue }}></p>
              )}
            </div>
            {!isMobile && answerValue && (
              <p
                className={styles.copyAnswer}
                onClick={() => {
                  copy();
                }}
              >
                <img src={copySvg} alt="" />
                <span>复制回答</span>
              </p>
            )}
          </div>
          {!isMobile && (
            <Button
              className={styles.chat_retry}
              onClick={() => {
                onRetry && onRetry();
              }}
            >
              重试
            </Button>
          )}
        </Col>
        <Col>
          {isMobile && answerValue && (
            <Row justify={'end'} align={'middle'} className={styles.mobile_button}>
              <Button
                className={styles.mobile_copyAnswer}
                icon={<CopyOutlined />}
                onClick={() => {
                  copy();
                }}
              >
                复制回答
              </Button>
              <Button
                className={styles.mobile_chat_retry}
                onClick={() => {
                  onRetry && onRetry();
                }}
              >
                重试
              </Button>
            </Row>
          )}
        </Col>
      </Row>
    </Col>
  );
};

export default Answer;
