import React, { useEffect, useState } from 'react' ;
import { Modal, Form, Select, Grid, Slider, Switch, Input, Message } from '@arco-design/web-react';
import EditableTable from '@/components/EditableTable';
import { getComponentClassify } from '@/api/componentClassify';
import { getHostList } from '@/api/componentDeployEnv';
import { createInstance, localStart } from '@/api/componentInstance';

const FormItem = Form.Item;
const Option = Select.Option;

const runTypes = [
  {
    label: '本地运行',
    value: 'local'
  },
  {
    label: '线上运行',
    value: 'online'
  }
];

const portColumns = [
  {
    title: '主机端口',
    dataIndex: 'name',
    editable: true
  },
  {
    title: '容器端口',
    dataIndex: 'salary',
    editable: true
  },
  {
    title: '备注',
    dataIndex: 'email',
    editable: true

  }
];
const directoryColumns = [
  {
    title: '主机路径',
    dataIndex: 'name',
    editable: true
  },
  {
    title: '容器路径',
    dataIndex: 'salary',
    editable: true
  },
  {
    title: '备注',
    dataIndex: 'email',
    editable: true
  }
];
const deviceColumns = [
  {
    title: '主机路径',
    dataIndex: 'name',
    editable: true
  },
  {
    title: '容器路径',
    dataIndex: 'salary',
    editable: true
  },
  {
    title: '权限',
    dataIndex: 'email',
    editable: true
  },
  {
    title: '备注',
    dataIndex: 'email',
    editable: true
  }
];

const AddModal = ({ addItem, visible, setVisible, onSuccess }) => {
  const [form] = Form.useForm();
  const [currentRunType, setCurrentRunType] = useState('local');
  const [envType, setEnvType] = useState([]); // 环境类型
  const [hostOptions, setHostOptions] = useState([]); // 主机
  const [tableData, setTableData] = useState([]);
  const [loading, setLoading] = useState(false);

  const getEnvOptions = async () => {
    const res: any = await getComponentClassify('docker-env');
    if (res.code === 200) setEnvType(res.data);
  };

  const getHostOptions = async () => {
    const res: any = await getHostList({
      // type: 'docker-env',
      componentBaseId: addItem.componentBaseId
    });
    if (res.code === 200) setHostOptions(res.data);
  };

  useEffect(() => {
    if (visible) {
      getHostOptions();
      getEnvOptions();
    }
    else {
      // 关闭时重置表单
      form.resetFields();
      setCurrentRunType('local');
      setTableData([]);
    }
  }, [visible]);

  // 处理取消
  const handleCancel = () => {
    form.resetFields();
    setCurrentRunType('local');
    setTableData([]);
    setVisible(false);
  };

  // 处理确认
  const handleOk = async () => {
    try {
      setLoading(true);
      const values = await form.validate();

      // 整理参数
      const params = {
        deployEnvId: values.deployEnvId,
        componentBaseId: addItem.componentBaseId
      };

      const apiMap = {
        'local': localStart, // 本地运行
        'online': createInstance // 线上运行
      };

      const res: any = await apiMap[currentRunType](params);

      if (res.code === 200) {
        Message.success('新增实例成功');
        handleCancel(); // 关闭弹窗并重置表单
        // 调用成功回调刷新数据
        if (onSuccess) {
          onSuccess();
        }
      }
      else {
        Message.error(res.msg || '新增实例失败');
      }
    } catch (error) {
      console.error('表单校验失败：', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title="新增实例"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      confirmLoading={loading}
      autoFocus={false}
      focusLock={true}
      style={{ width: '40%' }}
    >
      <Form form={form} autoComplete="off">
        <Grid.Row gutter={8}>
          <Grid.Col span={24}>
            <FormItem label="部署方式：">
              <Select
                placeholder="请选择"
                style={{ width: '60%' }}
                value={currentRunType}
                onChange={(value) => setCurrentRunType(value)}
              >
                {runTypes.map((option, index) => (
                  <Option key={option.value} value={option.value}>
                    {option.label}
                  </Option>
                ))}
              </Select>
            </FormItem>
          </Grid.Col>
        </Grid.Row>
        {
          currentRunType === 'online' && (
            <>
              <Grid.Row gutter={8}>
                {/*<Grid.Col span={12}>*/}
                {/*  <FormItem label="部署环境：" field="tags">*/}
                {/*    <Select*/}
                {/*      placeholder="请选择部署环境"*/}
                {/*      style={{ width: '90%' }}*/}
                {/*    >*/}
                {/*      {envType.map((option, index) => (*/}
                {/*        <Option key={option.id} value={option.id}>*/}
                {/*          {option.classifyName}*/}
                {/*        </Option>*/}
                {/*      ))}*/}
                {/*    </Select>*/}
                {/*  </FormItem>*/}
                {/*</Grid.Col>*/}
                <Grid.Col span={24}>
                  <FormItem
                    label="主机："
                    field="deployEnvId"
                    required
                    rules={[
                      {
                        validator: (value, cb) => {
                          if (!value) {
                            return cb('请选择主机');
                          }
                          return cb(null);
                        }
                      }
                    ]}
                  >
                    <Select
                      placeholder="请选择主机"
                      style={{ width: '60%' }}
                      allowClear={true}
                    >
                      {hostOptions.map((option, index) => (
                        <Option key={option.ip} value={option.id}>
                          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span>{option.name}</span>
                            <span style={{ color: '#999', fontSize: 12 }}>{option.ip}</span>
                          </div>
                        </Option>
                      ))}
                    </Select>
                  </FormItem>
                </Grid.Col>
              </Grid.Row>
              {/*<Grid.Row gutter={8}>*/}
              {/*  <Grid.Col span={12}>*/}
              {/*    <FormItem label="CPU核数：" field="a">*/}
              {/*      <Slider*/}
              {/*        defaultValue={1}*/}
              {/*        min={1}*/}
              {/*        max={4}*/}
              {/*        step={1}*/}
              {/*        showTicks={true}*/}
              {/*        marks={{*/}
              {/*          1: '1核',*/}
              {/*          2: '',*/}
              {/*          3: '',*/}
              {/*          4: '4核'*/}
              {/*        }}*/}
              {/*        style={{*/}
              {/*          width: '90%',*/}
              {/*          whiteSpace: 'nowrap'*/}
              {/*        }}*/}
              {/*      />*/}
              {/*    </FormItem>*/}
              {/*  </Grid.Col>*/}
              {/*  <Grid.Col span={12}>*/}
              {/*    <FormItem label="是否使用GPU：" field="b">*/}
              {/*      <Switch checkedText="ON" uncheckedText="OFF" />*/}
              {/*    </FormItem>*/}
              {/*  </Grid.Col>*/}
              {/*</Grid.Row>*/}
              {/*<FormItem label="最大内存：">*/}
              {/*  <Slider*/}
              {/*    defaultValue={2048}*/}
              {/*    min={64}*/}
              {/*    max={4069}*/}
              {/*    step={64}*/}
              {/*    marks={{*/}
              {/*      64: '64MB',*/}
              {/*      1024: '1GB',*/}
              {/*      2048: '2GB',*/}
              {/*      4069: '4GB'*/}
              {/*    }}*/}
              {/*    showInput={{*/}
              {/*      hideControl: false,*/}
              {/*      suffix: 'MB',*/}
              {/*      style: {*/}
              {/*        width: 100*/}
              {/*      }*/}
              {/*    }}*/}
              {/*    style={{ width: '100%' }}*/}
              {/*  />*/}
              {/*</FormItem>*/}
              {/*<Grid.Row gutter={8}>*/}
              {/*  <Grid.Col span={8}>*/}
              {/*    <FormItem label="网络模式：" field="tags">*/}
              {/*      <Select*/}
              {/*        placeholder="请选择网络模式"*/}
              {/*        style={{ width: '90%' }}*/}
              {/*      >*/}
              {/*        {runTypes.map((option, index) => (*/}
              {/*          <Option key={option.value} value={option.value}>*/}
              {/*            {option.label}*/}
              {/*          </Option>*/}
              {/*        ))}*/}
              {/*      </Select>*/}
              {/*    </FormItem>*/}
              {/*  </Grid.Col>*/}
              {/*  <Grid.Col span={8}>*/}
              {/*    <FormItem label="网卡：" field="type">*/}
              {/*      <Select*/}
              {/*        placeholder="请选择网卡"*/}
              {/*        style={{ width: '90%' }}*/}
              {/*      >*/}
              {/*        {runTypes.map((option, index) => (*/}
              {/*          <Option key={option.value} value={option.value}>*/}
              {/*            {option.label}*/}
              {/*          </Option>*/}
              {/*        ))}*/}
              {/*      </Select>*/}
              {/*    </FormItem>*/}
              {/*  </Grid.Col>*/}
              {/*  <Grid.Col span={8}>*/}
              {/*    <FormItem label="IP：" field="type">*/}
              {/*      <Input style={{ width: '90%' }} allowClear placeholder="请输入IP" />*/}
              {/*    </FormItem>*/}
              {/*  </Grid.Col>*/}
              {/*</Grid.Row>*/}
              {/*<FormItem label="端口映射：">*/}
              {/*  <EditableTable*/}
              {/*    columns={portColumns}*/}
              {/*    data={tableData}*/}
              {/*    onDataChange={(newData) => setTableData(newData)}*/}
              {/*    showAddButton={true}*/}
              {/*    addButtonText="添加行"*/}
              {/*    showDeleteButton={true}*/}
              {/*    deleteButtonText="删除"*/}
              {/*    tableProps={{*/}
              {/*      pagination: { pageSize: 5 },*/}
              {/*      scroll: { y: 400 }*/}
              {/*    }}*/}
              {/*  />*/}
              {/*</FormItem>*/}
              {/*<FormItem label="目录挂载：">*/}
              {/*  <EditableTable*/}
              {/*    columns={directoryColumns}*/}
              {/*    data={tableData}*/}
              {/*    onDataChange={(newData) => setTableData(newData)}*/}
              {/*    showAddButton={true}*/}
              {/*    addButtonText="添加行"*/}
              {/*    showDeleteButton={true}*/}
              {/*    deleteButtonText="删除"*/}
              {/*    tableProps={{*/}
              {/*      pagination: { pageSize: 5 },*/}
              {/*      scroll: { y: 400 }*/}
              {/*    }}*/}
              {/*  />*/}
              {/*</FormItem>*/}
              {/*<FormItem label="设备挂载：">*/}
              {/*  <EditableTable*/}
              {/*    columns={deviceColumns}*/}
              {/*    data={tableData}*/}
              {/*    onDataChange={(newData) => setTableData(newData)}*/}
              {/*    showAddButton={true}*/}
              {/*    addButtonText="添加行"*/}
              {/*    showDeleteButton={true}*/}
              {/*    deleteButtonText="删除"*/}
              {/*    tableProps={{*/}
              {/*      pagination: { pageSize: 5 },*/}
              {/*      scroll: { y: 400 }*/}
              {/*    }}*/}
              {/*  />*/}
              {/*</FormItem>*/}
            </>
          )
        }
      </Form>

    </Modal>
  );
};

export default AddModal;