import { useShallow } from 'zustand/react/shallow';
import { useSessionStore } from '../store/session';
import { useEffect } from 'react';
import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
import { DeleteOutlined, HistoryOutlined, PlusOutlined } from '@ant-design/icons';
import { isObjectNull } from '@/utils/is-null';
import { useAiStore } from '@/pages/ai-chat';

const FormModal = () => {
  const [form] = Form.useForm();
  const sessionStore = useSessionStore(
    useShallow((state) => {
      return {
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        updateData: state.updateData,
      };
    }),
  );
  useEffect(() => {
    const open = sessionStore.showEdit;
    if (open) {
      const isNull = isObjectNull(sessionStore.formData);
      if (isNull) {
        form.setFieldsValue({});
      } else form.setFieldsValue(sessionStore.formData);
    }
  }, [sessionStore.showEdit]);
  const onFinish = async (values: any) => {
    sessionStore.updateData(values);
  };
  const onClose = () => {
    sessionStore.setShowEdit(false);
    form.resetFields();
  };
  const isEdit = sessionStore.formData.id;
  return (
    <Modal
      title={isEdit ? 'Edit' : 'Add'}
      open={sessionStore.showEdit}
      onClose={() => sessionStore.setShowEdit(false)}
      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='type' label='type'>
          <Input />
        </Form.Item>
        <Form.Item name='chatPromptId' label='chatPromptId'>
          <Input />
        </Form.Item>
        <Form.Item label=' ' colon={false}>
          <Button type='primary' htmlType='submit'>
            Submit
          </Button>
          <Button className='ml-2' htmlType='reset' onClick={onClose}>
            Cancel
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export const List = () => {
  const sessionStore = useSessionStore(
    useShallow((state) => {
      return {
        list: state.list,
        getList: state.getList,
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        deleteData: state.deleteData,
      };
    }),
  );
  const aiStore = useAiStore(
    useShallow((state) => ({
      setKey: state.setKey,
      setOpen: state.setOpen,
    })),
  );
  useEffect(() => {
    sessionStore.getList();
  }, []);
  return (
    <div className='flex w-full h-full bg-slate-200'>
      <div className='h-full bg-white flex-shrink-0 flex justify-center'>
        <Button className='m-4' onClick={() => sessionStore.setShowEdit(true)} icon={<PlusOutlined />}></Button>
      </div>
      <div className='p-4'>
        <div className='flex flex-wrap gap-4'>
          {sessionStore.list.map((item) => {
            return (
              <div key={item.id} className='card'>
                <div className='card-title'>{item.titel || '-'}</div>
                <div>{item.id}</div>
                <div>{item.type}</div>
                <div>{item.chatPromptId}</div>
                <div className='card-footer mt-3'>
                  <Button.Group>
                    <Tooltip title='历史记录'>
                      <Button
                        onClick={() => {
                          // 继续回话，打开历史
                          aiStore.setKey(item.key);
                          aiStore.setOpen(true);
                        }}
                        icon={<HistoryOutlined />}></Button>
                    </Tooltip>
                    <Tooltip title='Delete'>
                      <Button
                        onClick={(e) => {
                          Modal.confirm({
                            title: 'Delete',
                            content: 'Are you sure delete this data?',
                            onOk: () => {
                              sessionStore.deleteData(item.id);
                            },
                          });
                          e.stopPropagation();
                        }}
                        icon={<DeleteOutlined />}></Button>
                    </Tooltip>
                  </Button.Group>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <FormModal />
    </div>
  );
};
