import React, { useState, useEffect } from 'react';
import { Modal, Checkbox, Input } from 'antd';
import { useTranslation } from 'react-i18next';
import {
  CANVAS_MODAL_PROPS,
  CANVAS_MODAL_TITLE_STYLE,
} from './canvasModalProps';

export interface LineChartDataSourceResult {
  legendShow: boolean;
  showGrid: boolean;
  showAxis: boolean;
  showDots: boolean;
  showLabel: boolean;
  stacked: boolean;
  area: boolean;
  smooth: boolean;
  dataDescription: string;
  code: string;
}

interface LineChartDataSourceModalProps {
  open: boolean;
  code: string;
  onConfirm: (result: LineChartDataSourceResult) => void;
  onCancel: () => void;
}

const LineChartDataSourceModal: React.FC<LineChartDataSourceModalProps> = ({
  open,
  code,
  onConfirm,
  onCancel,
}) => {
  const { t } = useTranslation();
  const [legendShow, setLegendShow] = useState(true);
  const [showGrid, setShowGrid] = useState(true);
  const [showAxis, setShowAxis] = useState(true);
  const [showDots, setShowDots] = useState(false);
  const [showLabel, setShowLabel] = useState(false);
  const [stacked, setStacked] = useState(false);
  const [area, setArea] = useState(false);
  const [smooth, setSmooth] = useState(false);
  const [dataDescription, setDataDescription] = useState('');

  useEffect(() => {
    if (open) {
      // 从 code 解析当前状态
      setLegendShow(!/legendShow\s*=\s*\{false\}/.test(code));
      setShowGrid(!/showGrid\s*=\s*\{false\}/.test(code));
      setShowAxis(!/showAxis\s*=\s*\{false\}/.test(code));
      setShowDots(/showDots\s*=\s*\{true\}/.test(code));
      setShowLabel(/showLabel\s*=\s*\{true\}/.test(code));
      setStacked(/stacked\s*=\s*\{true\}/.test(code));
      setArea(/area\s*=\s*\{true\}/.test(code));
      setSmooth(
        /smooth\s*=\s*\{true\}/.test(code) || /\bsmooth\b(?!\s*=)/.test(code),
      );
      setDataDescription('');
    }
  }, [open, code]);

  const handleConfirm = () => {
    onConfirm({
      legendShow,
      showGrid,
      showAxis,
      showDots,
      showLabel,
      stacked,
      area,
      smooth,
      dataDescription: dataDescription.trim(),
      code,
    });
  };

  return (
    <Modal
      {...CANVAS_MODAL_PROPS}
      title={
        <span style={CANVAS_MODAL_TITLE_STYLE}>
          {t('canvas.dataSourceModal.title')}
        </span>
      }
      open={open}
      onOk={handleConfirm}
      onCancel={onCancel}
      okText={t('canvas.dataSourceModal.ok')}
      cancelText={t('canvas.dataSourceModal.cancel')}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Checkbox
          checked={legendShow}
          onChange={(e) => setLegendShow(e.target.checked)}
        >
          {t('canvas.dataSourceModal.showLegend')}
        </Checkbox>
        <Checkbox
          checked={showGrid}
          onChange={(e) => setShowGrid(e.target.checked)}
        >
          显示网格线
        </Checkbox>
        <Checkbox
          checked={showAxis}
          onChange={(e) => setShowAxis(e.target.checked)}
        >
          显示坐标轴
        </Checkbox>
        <Checkbox
          checked={showDots}
          onChange={(e) => setShowDots(e.target.checked)}
        >
          显示坐标点
        </Checkbox>
        {showDots && (
          <Checkbox
            checked={showLabel}
            onChange={(e) => setShowLabel(e.target.checked)}
            style={{ marginLeft: 24 }}
          >
            显示坐标点数据
          </Checkbox>
        )}
        <Checkbox
          checked={stacked}
          onChange={(e) => setStacked(e.target.checked)}
        >
          堆叠模式
        </Checkbox>
        <Checkbox checked={area} onChange={(e) => setArea(e.target.checked)}>
          面积填充
        </Checkbox>
        <Checkbox
          checked={smooth}
          onChange={(e) => setSmooth(e.target.checked)}
        >
          拟合曲线
        </Checkbox>

        <div style={{ marginTop: 4 }}>
          <div style={{ marginBottom: 6, fontSize: 13, color: '#595959' }}>
            数据来源描述：
          </div>
          <Input.TextArea
            value={dataDescription}
            onChange={(e) => setDataDescription(e.target.value)}
            placeholder={t('canvas.dataSourceModal.linePlaceholder')}
            rows={3}
            style={{ resize: 'vertical' }}
          />
        </div>
      </div>
    </Modal>
  );
};

export default LineChartDataSourceModal;
