import { useShallow } from 'zustand/react/shallow';
import { useHistoryStore } from '../store/history';
import { useEffect } from 'react';
import { CardBlank } from '@/components/card/CardBlank';
import { Button, Modal, Tooltip } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';

export const List = () => {
  const historyStore = useHistoryStore(
    useShallow((state) => {
      return {
        list: state.list,
        getList: state.getList,
        deleteData: state.deleteData,
      };
    }),
  );
  useEffect(() => {
    historyStore.getList();
  }, []);
  return (
    <div className='flex w-full h-full bg-slate-200'>
      <div className='p-4'>
        <div className=' flex gap-4 flex-wrap'>
          {historyStore.list.map((item) => {
            return (
              <div key={item.id} className='card'>
                <div>{item.id}</div>
                <div>{item.title}</div>
                <div>{item.chatId}</div>
                <div>{item.promptId}</div>
                {/* <div>{item.data.message || '-'}</div> */}
                <div className='card-footer mt-3'>
                  <Button.Group>
                    <Tooltip title='Delete'>
                      <Button
                        onClick={(e) => {
                            Modal.confirm({
                              title: 'Delete',
                              content: 'Are you sure delete this data?',
                              onOk: () => {
                                historyStore.deleteData(item.id);
                              },
                            });
                          e.stopPropagation();
                        }}
                        icon={<DeleteOutlined />}></Button>
                    </Tooltip>
                  </Button.Group>
                </div>
              </div>
            );
          })}
          <CardBlank />
        </div>
      </div>
    </div>
  );
};
