import {ModalForm,ProForm} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import React, {useEffect, useState} from 'react';
import {Button, Form, message} from 'antd';

import { Table, Transfer } from 'antd';
import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
import type { TransferItem, TransferProps } from 'antd/es/transfer';
import {TransferDirection} from "antd/es/transfer";
import {postAlgorithmModelGetAlgorithmModelFkSelect} from "@/services/resource/AlgorithmModel";
import {postDeviceGetDeviceFkSelect} from "@/services/device/Device";
import {postDeviceGroupGetDeviceGroupTree} from "@/services/device/DeviceGroup";
import {putRoleUpdateDevicesInGroupModel} from "@/services/device/DeviceModelInGroup";

interface RecordType {
    key: string;
    title: string;
    description: string;
    disabled: boolean;
    tag: string;
}

interface DataType {
    key: string;
    title: string;
    description: string;
    disabled: boolean;
    tag: string;
}

interface TableTransferProps extends TransferProps<TransferItem> {
    dataSource: DataType[];
    leftColumns: ColumnsType<DataType>;
    rightColumns: ColumnsType<DataType>;
}

export type FormValueType = {
      target?: string;
      template?: string;
      type?: string;
      time?: string;
      frequency?: string;
    } & Partial<API.DeviceModelInGroup>;

    export type UpdateFormProps = {
      updateModalOpen: boolean;
      handleModal: () => void;
      values: Partial<API.DeviceModelInGroup>;
      reload: any;
    };

const UpdateForm: React.FC<UpdateFormProps> = (props) => {

  const intl = useIntl();
  const [form] = Form.useForm<API.DeviceModelInGroup>();

    const [modalData, setModalData] = useState<RecordType[]>([]);
    const [targetKeys, setTargetKeys] = useState<string[]>([]);


    const getModelData = () => {
        postDeviceGetDeviceFkSelect({keyword: ''}).then((res)=>{
            let result = (res.data?.list || []).map((v: any)=>{
                return {
                    key: v.id,
                    title: v.name,
                    chosen: false,
                }
            })
            setModalData(result);
        })
        // setMockData(tempMockData);
        // setTargetKeys(tempTargetKeys);
    };
    useEffect(() => {
        setTargetKeys([])
        if (props.updateModalOpen) {
            getModelData();
        } else {
        }
    }, [props.updateModalOpen])
    const handleChange = (newTargetKeys: string[]) => {
        setTargetKeys(newTargetKeys);
    };
    const handleSearch = (dir: TransferDirection, value: string) => {
        postDeviceGetDeviceFkSelect({keyword: value}).then((res)=>{
            let result = (res.data?.list || []).map((v: any)=>{
                return {
                    key: v.id,
                    title: v.name,
                    chosen: false,
                }
            })
            setModalData(result);
        })
    };
  return (
    <ModalForm<API.DeviceModelInGroup>
      title={intl.formatMessage({
        id: 'common.modal.table.update.title',
        defaultMessage: '$$$',
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values:any) => {
          console.log(4444, props.values)
          putRoleUpdateDevicesInGroupModel({groupId: props.values.groupFkId, modelId: props.values.modelFkId, deviceIds: values?.devices || []}).then(()=>{
              props.handleModal();
                message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
          }).catch(()=>{
                message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
          })
        return true;
      }}
    >
        <ProForm.Item name='devices'>
            <Transfer
                dataSource={modalData}
                showSearch
                locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }}
                targetKeys={targetKeys}
                onChange={handleChange}
                onSearch={handleSearch}
                style={{marginBottom: '20px'}}
                render={(item) => item.title}
            />

        </ProForm.Item>
</ModalForm>)}
export default UpdateForm;
