import {
  ArrowLeftOutlined,
  ArrowRightOutlined,
  EditOutlined,
  EyeOutlined,
  PlusCircleOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
import { useEditor, useEditorReturnType } from '@craftjs/core';

import {
  Button,
  Col,
  Dropdown,
  Flex,
  message,
  Row,
  Upload,
  UploadProps,
  type MenuProps,
} from 'antd';
import React from 'react';

const AddRemoteModule: React.FC<{
  query: useEditorReturnType['query'];
  add: useEditorReturnType['actions']['addNodeTree'];
}> = ({ query, add }) => {
  const items: MenuProps['items'] = [
    {
      key: 'PLUS',
      label: 'Remote Add',
      onClick() {
        const node = query.parseReactElement(<div>6666</div>).toNodeTree();

        add(node, 'ROOT');
      },
    },
  ];

  return (
    <Dropdown menu={{ items }}>
      <Button shape="circle" icon={<PlusCircleOutlined />}></Button>
    </Dropdown>
  );
};

export const Tools: React.FC = () => {
  const {
    preview,
    actions: { setOptions, history, addNodeTree },
    query,
  } = useEditor((state) => ({
    preview: !state.options.enabled,
  }));

  // const { run: save } = useRequest(
  //   (data) => {
  //     return request('/api/template', {
  //       method: 'POST',
  //       data,
  //     });
  //   },
  //   {
  //     manual: true,
  //   },
  // );
  // 上传文件
  const uploadProps: UploadProps = {
    name: 'file',
    action: `/api/files/upload`,
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  return (
    <Row
      style={{ padding: '10px 20px' }}
      justify={preview ? 'center' : 'space-between'}
      align={'middle'}
      gutter={[16, 0]}
    >
      {!preview && (
        <Col>
          <Button onClick={() => history.undo()}>
            <ArrowLeftOutlined />
          </Button>
          &nbsp; &nbsp; &nbsp;
          <Button onClick={() => history.redo()}>
            <ArrowRightOutlined />
          </Button>
        </Col>
      )}
      <Col>
        <Flex gap={'small'}>
          <Button
            shape="circle"
            icon={preview ? <EditOutlined /> : <EyeOutlined />}
            onClick={() =>
              setOptions((options) => (options.enabled = !options.enabled))
            }
          />
          <AddRemoteModule query={query} add={addNodeTree} />
        </Flex>
      </Col>
      {!preview && (<>
        <Col>
          <ModalForm
            title="保存"
            trigger={<Button type="primary">Submit</Button>}
            onFinish={async (values) => {
              // await save({
              //   name: values.name,
              //   description: values.description,
              //   content: query.serialize(),
              // });
              message.success('保存成功');
            }}
          >
            <ProFormText
              name={'name'}
              label="名称"
              rules={[
                {
                  required: true,
                  message: '请输入模板名称',
                },
              ]}
            />
            <ProFormText name={'description'} label="描述" />
          </ModalForm>
        </Col>
        <Col>
          <Upload {...uploadProps}>
            <Button icon={<UploadOutlined />}>上传文件</Button>
          </Upload>
        </Col>
      </>
      )}
    </Row>
  );
};