import { useShallow } from 'zustand/react/shallow';
import { useOrgStore } from '../store';
import { useNavigation, useParams } from 'react-router';
import { useEffect } from 'react';
import { Button, Input, message, Modal, Select, Tooltip } from 'antd';
import { DeleteOutlined, EditOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
import { Form } from 'antd';
import { useNavigate } from 'react-router';
import { isObjectNull } from '@/utils/is-null';

const FormModal = () => {
  const [form] = Form.useForm();
  const userStore = useOrgStore(
    useShallow((state) => {
      return {
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        updateData: state.updateData,
        setFormData: state.setFormData,
      };
    }),
  );
  useEffect(() => {
    const open = userStore.showEdit;
    if (open) {
      const isNull = isObjectNull(userStore.formData);
      if (isNull) {
        form.setFieldsValue({});
      } else form.setFieldsValue(userStore.formData);
    }
  }, [userStore.showEdit, userStore.formData]);
  const onFinish = async (values: any) => {
    userStore.updateData(values);
  };
  const onClose = () => {
    userStore.setShowEdit(false);
    userStore.setFormData({});
  };
  const isEdit = userStore.formData.id;
  return (
    <Modal
      title={isEdit ? 'Edit' : 'Add'}
      open={userStore.showEdit}
      onClose={() => userStore.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='username' label='username'>
          <Input disabled={isEdit} />
        </Form.Item>
        <Form.Item name='role' label='role'>
          <Select
            options={[
              {
                label: 'admin',
                value: 'admin',
              },
              {
                label: 'user',
                value: 'user',
              },
            ]}></Select>
        </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 UserList = () => {
  const param = useParams();
  const navicate = useNavigate();
  const orgStore = useOrgStore(
    useShallow((state) => {
      return {
        users: state.users,
        org: state.org,
        setOrgId: state.setOrgId,
        getOrg: state.getOrg,
        setFormData: state.setFormData,
        setShowEdit: state.setShowEdit,
      };
    }),
  );
  useEffect(() => {
    if (param.id) {
      orgStore.setOrgId(param.id);
      orgStore.getOrg();
    }
    return () => {
      orgStore.setFormData({});
    };
  }, []);
  return (
    <div className='w-full h-full bg-gray-200 flex'>
      <div className='p-2 bg-white mr-2'>
        <Button
          icon={<PlusOutlined />}
          onClick={() => {
            // orgStore.setShowEdit(true);
            message.info('Coming soon');
          }}></Button>
      </div>
      <div className='p-4 pt-12  flex-grow relative'>
        <div className='absolute top-2'>
          <Tooltip title='返回'>
            <Button
              onClick={() => {
                navicate(-1);
              }}
              icon={<LeftOutlined />}></Button>
          </Tooltip>
        </div>
        <div className='p-4  bg-white  rounded-lg border shadow-md h-full'>
          <div className='flex gap-4'>
            {orgStore.users.map((item) => {
              const isOwner = item.role === 'owner';
              return (
                <div key={item.id} className='card w-[300px] border-t justify-between p-2 border-b'>
                  <div className='card-title capitalize'>username: {item.username}</div>
                  <div className='flex gap-2 capitalize'>{item.role || '-'}</div>
                  <div className='mt-2'>
                    <Button.Group>
                      <Tooltip title='Edit'>
                        <Button
                          icon={<EditOutlined />}
                          disabled={isOwner}
                          onClick={() => {
                            // orgStore.setFormData(item);
                            // orgStore.setShowEdit(true);
                            message.info('Coming soon');
                          }}></Button>
                      </Tooltip>
                      <Tooltip title='delete'>
                        <Button
                          icon={<DeleteOutlined />}
                          disabled={isOwner}
                          onClick={() => {
                            //
                            message.info('Coming soon');
                          }}></Button>
                      </Tooltip>
                    </Button.Group>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <FormModal />
    </div>
  );
};