import React, { useRef, useState } from 'react';
import { useIntl } from 'umi';
import ProForm, {
  DrawerForm,
  ProFormCheckbox,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
} from '@ant-design/pro-form';
import { Button } from 'antd';
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 formRef = useRef<ProFormInstance>();
  const btn = useRef<HTMLButtonElement>(null);
  const btn1 = useRef<HTMLButtonElement>(null);
  const intl = useIntl();
  const [lineName, setLineName] = useState<
    KanbanSetting[]
  >([]);
  const [lineNameFocus, setlineNameFocus] = useState(false);
  const onPressEnter = (e) => {
    setlineNameFocus(true)
  };
  const onInputKeyDown = (e) => {
    const a = document.getElementsByClassName('ant-select-open')
    if (e.code === "ArrowDown" && a.length === 0) {
      e.preventDefault()
      btn.current?.focus()
    }
  }
  const cancelBtn = (e) => {
    if (e.code === "ArrowRight") {
      btn1.current?.focus()
    } else if (e.code === "ArrowUp") {
      setlineNameFocus(true)
    }
  }
  const submitBtn = (e) => {
    if (e.code === "ArrowLeft") {
      btn.current?.focus()
    }
  }
  const onBlurlineName = () => {
    setlineNameFocus(false)
  }
  return (
    <DrawerForm
      formRef={formRef}
      title={intl.formatMessage({id: '设置'})}
      width={600}
      submitter={{
        searchConfig: {
          resetText: intl.formatMessage({id: '取消'}),
          submitText: intl.formatMessage({id: '确认'}),
        },
        render: (props1, doms) => {
          console.log(props1);
          return [
            <button
              type='button'
              key="rest"
              ref={btn}
              onKeyDown={cancelBtn}
              onClick={() => props.onVisibleChange(false)}
            >
              {intl.formatMessage({id: '取消'})}
            </button>,
            <button
              type='button'
              ref={btn1}
              key="submit"
              onKeyDown={submitBtn}
              onClick={() => props1.form?.submit?.()}
            >
              {intl.formatMessage({id: '确认'})}
            </button>,
          ];
        }
      }}
      visible={props.visible}
      onVisibleChange={(visible: boolean) => {
        if (visible) {
          formRef?.current?.setFieldsValue({
            ...props.values
          });
        }
        setlineNameFocus(false)
        props.onVisibleChange(visible);
      }}
      onFinish={async (values: FormSettingDto) => {
        props.onSubmitting({ ...values });
        props.onVisibleChange(false);
      }}
    >
      <ProFormCheckbox name="autoResize" label={intl.formatMessage({id: '适配窗口'})} width="xl" />
      <ProFormDigit
        name="intervalTime"
        label={intl.formatMessage({id: '刷新时间间隔（秒）'})}
        required
        width="xl"
        min={10}
        fieldProps={{ precision: 0 }}
      />
      <ProFormDigit
        name="rowMovingTime"
        label={intl.formatMessage({id: '内容滚动（秒）'})}
        required
        width="xl"
        min={1}
        fieldProps={{ precision: 0, onPressEnter: onPressEnter }}
      />
      <div >
      <ProFormSelect
        name="lineName"
        label={intl.formatMessage({id: '产线选择'})}
        required
        fieldProps={{ autoFocus: lineNameFocus, onInputKeyDown: onInputKeyDown, onBlur: () => onBlurlineName }}
        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;
