import React, { useState, useEffect } from 'react';
import { Form, Input, Select, Tabs, Switch, Space, Button } from 'antd';
import { FooterBar } from 'ilab-lib';
import TableContext from './context';
import { useDispatch } from 'dva';
import { useSafeState } from 'ahooks';
import FormDesign from './FormDesign';
import { fetchUserList } from '@/services/user';
import ProcessDesign from './ProcessDesign';
import styles from './index.less';

const { TabPane } = Tabs;

const Create: React.FC = () => {
  const [form] = Form.useForm();
  const dispatch = useDispatch();
  const [list, setList] = useState([]);
  const [targetKeys, setTargetKeys] = useSafeState<string[]>([]);
  const [selectRows, setSelectRows] = useSafeState<any[]>([]);
  const [leftKeyList, setLeftKeyList] = useSafeState<any[]>([]);

  const [config, setConfig] = useSafeState<any>({});

  useEffect(() => {
    fetchUserList().then((res) => {
      dispatch({
        type: 'user/setUserList',
        payload: res.data,
      });
    });
  }, []);


  return (
    <TableContext.Provider
      value={{
        targetKeys,
        selectRows,
        config,
        leftKeyList,
        setTargetKeys,
        setSelectRows,
        setConfig,
        setLeftKeyList,
      }}
    >
      <Form
        name="processForm"
        form={form}
        style={{ width: '100%' }}
        layout="inline"
        autoComplete="off"
      >
        <Form.Item
          label="流程名称"
          name="name"
          rules={[{ required: true, message: '请输入流程名称' }]}
        >
          <Input style={{ width: '100%' }} placeholder="请输入" />
        </Form.Item>
        <Form.Item
          label="关联项目"
          name="project"
          rules={[{ required: true, message: '请选择关联项目' }]}
        >
          <Select style={{ width: '240px' }} placeholder="请选择">
            {list?.map((item: any) => (
              <Select.Option value={item.value} key={item.value}>
                {item.label}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <div style={{ flex: 1, justifyContent: 'end', display: 'flex' }}>
          <Form.Item
            label=""
            name="checkbox"
            valuePropName="checked"
          >
            <Switch checkedChildren="启用" unCheckedChildren="停用" />
          </Form.Item>
        </div>
      </Form>
      <div className={styles.content}>
        <Tabs defaultActiveKey="1" tabBarExtraContent={{ left: <div style={{ width: 36 }} /> }}>
          <TabPane tab="表单设计" key="1">
            <FormDesign />
          </TabPane>
          <TabPane tab="流程设计" key="2">
            <ProcessDesign />
          </TabPane>
        </Tabs>
      </div>
      <FooterBar>
        <Space>
          <Button>取消</Button>
          <Button type="primary">保存</Button>
        </Space>
      </FooterBar>
    </TableContext.Provider>
  );
};

export default Create;