import { useEditStore } from '../../store';
import { Button, Input, message, Modal, Tooltip } from 'antd';
import { useEffect, version } from 'react';
import { useShallow } from 'zustand/react/shallow';
import { Form } from 'antd';
import { CloudUploadOutlined, DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons';
import { isObjectNull } from '@/utils/is-null';

export const PublishFormModal = () => {
  const [form] = Form.useForm();
  const editStore = useEditStore(
    useShallow((state) => {
      return {
        showEdit: state.showPublishModal,
        setShowEdit: state.setShowPublishModal,
        formData: state.formData,
        setFormData: state.setFormData,
        updateData: state.updateData,
        publishData: state.publishData,
      };
    }),
  );
  useEffect(() => {
    const open = editStore.showEdit;
    if (open) {
      if (isObjectNull(editStore.formData.data)) {
        form.setFieldsValue({
          publish: {},
        });
      } else
        form.setFieldsValue({
          ...editStore.formData,
          publish: {
            ...editStore.formData?.publish,
          },
        });
    }
  }, [editStore.showEdit, editStore.formData]);
  const onFinish = async (values: any) => {
    editStore.updateData(values);
  };
  const onClose = () => {
    editStore.setShowEdit(false);
    form.resetFields();
    editStore.setFormData({});
  };
  const isEdit = editStore.formData.publish?.id;
  const onPublish = () => {
    // @ts-ignore
    const values = form.getFieldsValue();
    editStore.publishData(values);
  };
  return (
    <Modal title={'Version Publish'} open={editStore.showEdit} onClose={onClose} destroyOnClose footer={false} width={800} onCancel={onClose}>
      <Form
        form={form}
        onFinish={onFinish}
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 20,
        }}>
        <Form.Item name={'id'} hidden>
          <Input />
        </Form.Item>
        <Form.Item name={['publish', 'id']} hidden>
          <Input />
        </Form.Item>
        <Form.Item name={['publish', 'key']} label='key'>
          <Input disabled={isEdit} />
        </Form.Item>
        <Form.Item name={['publish', 'version']} label='version'>
          <Input
            disabled={isEdit}
            addonAfter={
              !isEdit && (
                <div className='cursor-pointer hover:text-gray-400' onClick={onPublish}>
                  发布
                </div>
              )
            }
          />
        </Form.Item>
        <Form.Item name={['publish', 'description']} label='description'>
          <Input.TextArea rows={4} />
        </Form.Item>
        <Form.Item label=' ' colon={false}>
          <div className='flex gap-2'>
            <Button type='primary' htmlType='submit'>
              Save
            </Button>
            <Button className='' htmlType='reset' onClick={onClose}>
              Cancel
            </Button>
            {isEdit && (
              <Button type='default' danger className='ml-4' onClick={onPublish}>
                Publish
              </Button>
            )}
          </div>
        </Form.Item>
      </Form>
    </Modal>
  );
};
