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

export interface BarChartDataSourceResult {
  direction: 'vertical' | 'horizontal';
  showGrid: boolean;
  showLabel: boolean;
  dataDescription: string;
  code: string;
}

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

const BarChartDataSourceModal: React.FC<BarChartDataSourceModalProps> = ({
  open,
  code,
  onConfirm,
  onCancel,
}) => {
  const { t } = useTranslation();
  const DIRECTIONS = [
    { label: t('canvas.dataSourceModal.barVertical'), value: 'vertical' },
    { label: t('canvas.dataSourceModal.barHorizontal'), value: 'horizontal' },
  ];

  const [direction, setDirection] = useState<'vertical' | 'horizontal'>(
    'vertical',
  );
  const [showGrid, setShowGrid] = useState(true);
  const [showLabel, setShowLabel] = useState(true);
  const [dataDescription, setDataDescription] = useState('');

  useEffect(() => {
    if (open) {
      const hasHorizontal = /direction\s*=\s*"horizontal"/.test(code);
      setDirection(hasHorizontal ? 'horizontal' : 'vertical');
      setShowGrid(!/showGrid\s*=\s*\{false\}/.test(code));
      setShowLabel(!/showLabel\s*=\s*\{false\}/.test(code));
      setDataDescription('');
    }
  }, [open, code]);

  const handleConfirm = () => {
    onConfirm({
      direction,
      showGrid,
      showLabel,
      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 }}>
        <div>
          <div style={{ marginBottom: 6, fontSize: 13, color: '#595959' }}>
            方向：
          </div>
          <Radio.Group
            options={DIRECTIONS}
            value={direction}
            onChange={(e) => setDirection(e.target.value)}
          />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <Checkbox
            checked={showGrid}
            onChange={(e) => setShowGrid(e.target.checked)}
          >
            显示网格线
          </Checkbox>
          <Checkbox
            checked={showLabel}
            onChange={(e) => setShowLabel(e.target.checked)}
          >
            显示数据标签
          </Checkbox>
        </div>

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

export default BarChartDataSourceModal;
