import React, { useRef, useState } from 'react';
import { useIntl } from 'umi';
import ProForm, {
  DrawerForm,
  ProFormCheckbox,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
} from '@ant-design/pro-form';
import type { ProFormInstance } from '@ant-design/pro-form';
import { queryProductionComprehensKanbanData } from '../../services/api';
type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;

type FormSettingDto = {
  autoResize: boolean;
  intervalTime: number;
  rowMovingTime: number;
  dataRange: number;
  planSource: number;
  productionComprehensKanbanSettingId: string;
};

export type Setting = {
  autoResize: boolean;
  intervalTime: number;
  rowMovingTime: number;
  dataRange: number;
  planSource: number;
  lineName?: string;
};

export type SettingFormProps = {
  values: Partial<Setting>;
  visible: boolean;
  onVisibleChange: (visible: boolean) => void;
  onSubmitting: (setting: Setting) => Promise<any>;
};

const SettingForm: React.FC<SettingFormProps> = (props) => {
  const intervalTimeRef = useRef<HTMLDivElement>(null);
  const rowMovingTimeRef = useRef<HTMLDivElement>(null);
  const lineNameRef = useRef<HTMLDivElement>(null);
  const formRef = useRef<ProFormInstance>();
  const intl = useIntl();
  const [lineName, setLineName] = useState<
    KanbanSetting[]
  >([]);
  const handleKeyDown = (e, name) => {
    if (e.key === 'ArrowUp') {
      if(name === 'lineName') {
        rowMovingTimeRef.current?.children[0].focus()
      } else if (name === 'rowMovingTime') {
        intervalTimeRef.current?.children[0].focus()
      }
      // 在这里添加你的增加逻辑
    } else if (e.key === 'ArrowDown') {
      if(name === 'intervalTime') {
        rowMovingTimeRef.current?.children[0].focus()
      } else if (name === 'rowMovingTime') {
        lineNameRef.current?.children[0].focus()
      }
      // 在这里添加你的减少逻辑
    }
  };
  return (
    <DrawerForm
      formRef={formRef}
      title={intl.formatMessage({id: '设置'})}
      width={600}
      submitter={{
        searchConfig: {
          resetText: intl.formatMessage({id: '取消'}),
          submitText: intl.formatMessage({id: '确认'}),
        }
      }}
      visible={props.visible}
      onVisibleChange={(visible: boolean) => {
        if (visible) {
          formRef?.current?.setFieldsValue({
            ...props.values
          });
        }
        props.onVisibleChange(visible);
      }}
      onFinish={async (values: FormSettingDto) => {
        props.onSubmitting({ ...values });
        props.onVisibleChange(false);
      }}
    >
      <ProFormCheckbox name="autoResize" label={intl.formatMessage({id: '适配窗口'})} width="xl" />
      <div onKeyDown={(e)=>handleKeyDown(e, 'intervalTime')} ref={intervalTimeRef}>
        <ProFormDigit
          name="intervalTime"
          label={intl.formatMessage({id: '刷新时间间隔（秒）'})}
          required
          width="xl"
          min={10}
          fieldProps={{ precision: 0 }}
        />
      </div>
      <div onKeyDown={(e)=>handleKeyDown(e, 'rowMovingTime')} ref={rowMovingTimeRef}>
        <ProFormDigit
          name="rowMovingTime"
          label={intl.formatMessage({id: '内容滚动（秒）'})}
          required
          width="xl"
          min={1}
          fieldProps={{ precision: 0 }}
        />
      </div>
      <div onKeyDown={(e)=>handleKeyDown(e, 'lineName')}>
        <ProFormSelect
          name="lineName"
          label={intl.formatMessage({id: '产线选择'})}
          required
          ref={lineNameRef}
          width="xl"
          request={async () => {
            const { data } = await queryProductionComprehensKanbanData();
            if (Array.isArray(data)) {
              data.unshift(intl.formatMessage({
                id: '全厂'
              }))
            }
            setLineName(data);
            return data.map((a) => ({ label: a, value: a }));
          }}
        />
      </div>
      
    </DrawerForm>
  );
};

export default SettingForm;
