import { useShallow } from 'zustand/react/shallow';
import { useChatPromptStore } from '../store/chat-prompt';
import { useEffect } from 'react';
import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
import { DeleteOutlined, EditOutlined, MessageOutlined, PlusOutlined } from '@ant-design/icons';
import { isObjectNull } from '@/utils/is-null';
import { Select as AiAgentSelect } from '../../ai-agent';
import { Select as PromptSelect } from '../../prompt';
import { CardBlank } from '@/components/card/CardBlank';
import { useAiStore } from '@/pages/ai-chat';

const FormModal = () => {
  const [form] = Form.useForm();
  const chatPromptStore = useChatPromptStore(
    useShallow((state) => {
      return {
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        updateData: state.updateData,
      };
    }),
  );
  useEffect(() => {
    const open = chatPromptStore.showEdit;
    if (open) {
      const isNull = isObjectNull(chatPromptStore.formData);
      if (isNull) {
        form.setFieldsValue({});
      } else form.setFieldsValue(chatPromptStore.formData);
    }
  }, [chatPromptStore.showEdit]);
  const onFinish = async (values: any) => {
    chatPromptStore.updateData(values);
  };
  const onClose = () => {
    chatPromptStore.setShowEdit(false);
    form.resetFields();
  };
  const isEdit = chatPromptStore.formData.id;
  return (
    <Modal
      title={isEdit ? 'Edit' : 'Add'}
      open={chatPromptStore.showEdit}
      onClose={() => chatPromptStore.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='title' label='title'>
          <Input />
        </Form.Item>
        <Form.Item name='description' label='description'>
          <Input.TextArea rows={4} />
        </Form.Item>
        <Form.Item label='key' name='key'>
          <Input />
        </Form.Item>
        <Form.Item label='agent' name={['data', 'aiAgentId']}>
          <AiAgentSelect />
        </Form.Item>
        <Form.Item label='prompt' name={['data', 'promptId']}>
          <PromptSelect />
        </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 chatPromptStore = useChatPromptStore(
    useShallow((state) => {
      return {
        list: state.list,
        getList: state.getList,
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        setFormData: state.setFormData,
        deleteData: state.deleteData,
      };
    }),
  );
  const aiStore = useAiStore(
    useShallow((state) => {
      return {
        open: state.open,
        setOpen: state.setOpen,
        setKey: state.setKey,
      };
    }),
  );
  useEffect(() => {
    chatPromptStore.getList();
  }, []);
  return (
    <div className='flex w-full h-full bg-slate-200'>
      <div className='h-full p-2 bg-white flex-shrink-0 flex justify-center'>
        <Button className='' onClick={() => chatPromptStore.setShowEdit(true)} icon={<PlusOutlined />}></Button>
      </div>
      <div className='p-4'>
        <div className='flex flex-wrap gap-4'>
          {chatPromptStore.list.map((item) => {
            return (
              <div className='card w-[400px] max-h-[300px] scrollbar' key={item.id}>
                <div className='card-title flex items-center '>
                  <div>{item.title} </div>
                  <div className='card-key ml-4'>{item.key}</div>
                </div>
                <div className='font-light mt-2'>{item.description ? item.description : '-'}</div>
                <div>
                  <div className='flex mt-2 '>
                    <Button.Group>
                      <Tooltip title='Edit'>
                        <Button
                          onClick={(e) => {
                            chatPromptStore.setFormData(item);
                            chatPromptStore.setShowEdit(true);
                            e.stopPropagation();
                          }}
                          icon={<EditOutlined />}></Button>
                      </Tooltip>
                      <Tooltip title='Delete'>
                        <Button
                          onClick={(e) => {
                            Modal.confirm({
                              title: 'Delete',
                              content: 'Are you sure delete this data?',
                              onOk: () => {
                                chatPromptStore.deleteData(item.id);
                              },
                            });
                            e.stopPropagation();
                          }}
                          icon={<DeleteOutlined />}></Button>
                      </Tooltip>
                      <Tooltip title='Chat'>
                        <Button
                          onClick={(e) => {
                            aiStore.setKey(location.pathname);
                            aiStore.setOpen(true);
                          }}
                          icon={<MessageOutlined />}></Button>
                      </Tooltip>
                    </Button.Group>
                  </div>
                </div>
              </div>
            );
          })}
          <CardBlank className='w-[300px]' />
          {!chatPromptStore.list.length && <div className='text-center w-full'>No data</div>}
        </div>
      </div>
      <FormModal />
    </div>
  );
};
