import { Button, Input, message, Modal, Table } from 'antd';
import { useEffect, useState } from 'react';
import { usePublishStore } from '../store';
import { useShallow } from 'zustand/react/shallow';
import { Form } from 'antd';
import copy from 'copy-to-clipboard';
import { useNavigate } from 'react-router';
const FormModal = () => {
  const [form] = Form.useForm();
  const containerStore = usePublishStore(
    useShallow((state) => {
      return {
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        updateData: state.updateData,
      };
    }),
  );
  useEffect(() => {
    const open = containerStore.showEdit;
    if (open) {
      form.setFieldsValue(containerStore.formData || {});
    } else {
      form.resetFields();
    }
  }, [containerStore.showEdit]);
  const onFinish = async (values: any) => {
    containerStore.updateData(values);
  };
  const onClose = () => {
    containerStore.setShowEdit(false);
    form.resetFields();
  };
  const isEdit = containerStore.formData.id;
  return (
    <Modal
      title={isEdit ? 'Edit' : 'Add'}
      open={containerStore.showEdit}
      onClose={() => containerStore.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 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 navicate = useNavigate();
  const containerStore = usePublishStore(
    useShallow((state) => {
      return {
        setFormData: state.setFormData,
        setShowEdit: state.setShowEdit,
        list: state.list,
        deleteData: state.deleteData,
        getList: state.getList,
        loading: state.loading,
      };
    }),
  );
  useEffect(() => {
    containerStore.getList();
  }, []);

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (text: string) => {
        return (
          <div
            className='w-40 truncate cursor-pointer'
            title={text}
            onClick={() => {
              copy(text);
              message.success('copy success');
            }}>
            {text}
          </div>
        );
      },
    },
    {
      title: 'Title',
      dataIndex: 'title',
    },

    {
      title: 'Source',
      dataIndex: 'source',
    },
    {
      title: 'Operation',
      dataIndex: 'operation',
      render: (text: string, record: any) => {
        return (
          <div className='flex gap-2'>
            <Button
              type='primary'
              onClick={() => {
                containerStore.setFormData(record);
                containerStore.setShowEdit(true);
              }}>
              Edit
            </Button>
            <Button
              onClick={() => {
                navicate('/container/preview/' + record.id);
              }}>
              Preview
            </Button>
            <Button
              danger
              onClick={() => {
                containerStore.deleteData(record.id);
              }}>
              Delete
            </Button>
          </div>
        );
      },
    },
  ];
  return (
    <div className='w-full h-full flex flex-col'>
      <div className='mb-2 w-full p-2 bg-white rounded-lg'>
        <Button
          className='w-20 '
          type='primary'
          onClick={() => {
            containerStore.setFormData({});
            containerStore.setShowEdit(true);
          }}>
          Add
        </Button>
      </div>
      <div className='flex-grow overflow-scroll'>
        <Table
          pagination={false}
          scroll={{
            y: 600,
          }}
          loading={containerStore.loading}
          dataSource={containerStore.list}
          rowKey='id'
          columns={columns}
        />
      </div>
      <div className='h-2'></div>
      <FormModal />
    </div>
  );
};