import React from 'react';
import { Form, Input, Row, Col, Radio, Checkbox } from 'antd';
import {
  StateInfo,
  FenceStateConfig,
  FenceStateTypeEnum,
  FileInfo,
  FileTypeEnum,
} from '@easytwin/core';

import { BlurInput, BlurInputNumber, ColorInput, SliderInput, RangeColor } from '@/components';
import { FileCard } from '@/pages/FileManage/components';

export interface FenceFormProp {
  dataSource: StateInfo['config'];
  onChange: (data: FenceStateConfig) => void;
}

type FormValuesChangeType = Omit<FenceStateConfig, 'videoFileId'> & {
  videoFileId: FileInfo;
};

const FenceForm: React.FC<FenceFormProp> = function ({ dataSource, onChange }) {
  const [form] = Form.useForm();

  React.useEffect(() => {
    form.setFieldsValue(dataSource);
  }, [form, dataSource]);

  return (
    <Form
      form={form}
      className="!px-1"
      labelCol={{
        span: 6,
      }}
      wrapperCol={{
        span: 18,
      }}
      labelAlign="left"
      colon={false}
      onValuesChange={(changedValue: FormValuesChangeType) => {
        const { videoFileId } = changedValue;

        const newData: FenceStateConfig = {
          ...(dataSource as FenceStateConfig),
          ...changedValue,
          videoFileId: (dataSource as FenceStateConfig).videoFileId,
        };

        if (videoFileId) {
          newData.videoFileId = videoFileId.id;
          newData.videoFileUrl = videoFileId.url;
        }

        onChange(newData);
      }}>
      {/* 围栏高度 */}
      <Form.Item label="围栏高度" name="height" className="!mb-2">
        <BlurInputNumber />
      </Form.Item>

      {/* 自动闭合 */}
      <Form.Item label="自动闭合" name="closed" className="!mb-2" valuePropName="checked">
        <Checkbox />
      </Form.Item>

      {/* 样式类型 */}
      <Form.Item name="type" label="样式类型" className="!mb-2">
        <Radio.Group className="!w-full" size="small">
          <Radio.Button className="w-1/2 text-center" value={FenceStateTypeEnum.BASE}>
            基础样式
          </Radio.Button>
          <Radio.Button className="w-1/2 text-center" value={FenceStateTypeEnum.VIDEO}>
            视频样式
          </Radio.Button>
        </Radio.Group>
      </Form.Item>

      {(dataSource as FenceStateConfig).type === FenceStateTypeEnum.BASE && (
        <>
          <Form.Item label="基底颜色" className="!mb-2">
            <Input.Group size="small">
              <Row gutter={8}>
                <Col span={15}>
                  <Form.Item name="color" className="!mb-0">
                    <RangeColor />
                  </Form.Item>
                </Col>
                <Col span={9}>
                  <Form.Item name="opacity" className="!mb-0">
                    <BlurInput suffix="%" />
                  </Form.Item>
                </Col>
              </Row>
            </Input.Group>
          </Form.Item>

          {/* 围栏动画 */}
          <Form.Item label="围栏动画" className="!mb-2" valuePropName="checked" name="useAnimation">
            <Checkbox />
          </Form.Item>

          {(dataSource as FenceStateConfig).useAnimation && (
            <>
              {/* 线条颜色 */}
              <Form.Item label="线条颜色" className="!mb-2">
                <Input.Group size="small">
                  <Row gutter={8}>
                    <Col span={15}>
                      <Form.Item name="lineColor" className="!mb-0">
                        <ColorInput />
                      </Form.Item>
                    </Col>
                    <Col span={9}>
                      <Form.Item name="lieeOpacity" className="!mb-0">
                        <BlurInput suffix="%" />
                      </Form.Item>
                    </Col>
                  </Row>
                </Input.Group>
              </Form.Item>

              {/* 线条高度 */}
              <Form.Item label="线条高度" className="!mb-2">
                <Input.Group size="small">
                  <Row gutter={8}>
                    <Col span={15}>
                      <Form.Item name="lineHeight" className="!mb-0">
                        <SliderInput min={1} max={100} step={1} showInput={false} />
                      </Form.Item>
                    </Col>
                    <Col span={9}>
                      <Form.Item name="lineHeight" className="!mb-0">
                        <BlurInput suffix="%" />
                      </Form.Item>
                    </Col>
                  </Row>
                </Input.Group>
              </Form.Item>

              {/* 动画速度 */}
              <Form.Item label="动画速度" className="!mb-2" name="animationStep">
                <BlurInputNumber />
              </Form.Item>
            </>
          )}
        </>
      )}

      {(dataSource as FenceStateConfig).type === FenceStateTypeEnum.VIDEO && (
        <>
          {/* 基底视频 */}
          <Form.Item name="videoFileId" label="基底视频" className="!mb-2">
            <FileCard
              mode={FileTypeEnum.FILE}
              changedValueType="info"
              innerContextClassName="p-2"
              showDeleteBtn={false}
              uploadAccept="video/mp4,video/webm,video/ogg"
            />
          </Form.Item>

          {/* 视频高度 */}
          <Form.Item name="videoHeight" label="视频高度" className="!mb-2">
            <BlurInputNumber />
          </Form.Item>
        </>
      )}
    </Form>
  );
};

export default FenceForm;