import { Checkbox, Input, Pagination, Radio, Space } from 'antd';
import DepartSelect from '../DepartSelect/Controlled';
import { memo, useEffect, useState } from 'react';
import { useIntl, useRequest } from 'umi';
import { formatUserRender } from '../utils';

interface UserDepartProps {
  type: 'User' | 'Depart';
  data: { id: number }[];
}
const UserDepart = ({
  disabled = false,
  show = false,
  appId,
  value = { type: 'User', data: [] },
  onChange,
}: {
  disabled?: boolean;
  show?: boolean;
  appId: number;
  value?: UserDepartProps;
  onChange?: (value: UserDepartProps) => void;
}) => {
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(10);
  const [search, setSearch] = useState('');
  const { formatMessage } = useIntl();
  const { data, run } = useRequest(
    {
      url: '/goapi/app/users',
      method: 'Post',
      data: {
        condition: {
          appId: appId,
          search,
        },
        pagination: {
          page: page,
          size: size,
        },
      },
    },
    {
      manual: true,
      debounceInterval: 800,
    },
  );
  const UserList = () => {
    return (
      <Space direction="vertical" style={{ paddingLeft: 10 }}>
        <Input
          disabled={disabled}
          placeholder={formatMessage({ id: 'components.ManageAdmin.userDepart.placeholder' })}
          style={{ width: 500 }}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <Checkbox.Group disabled={disabled} value={value?.data?.map((user) => user.id - 0)}>
          <Space direction="vertical">
            {data?.list?.map((user) => (
              <Checkbox
                key={user.id}
                value={user.id}
                onChange={(e) => {
                  if (e.target.checked) {
                    onChange?.({ ...value, data: [...value?.data, { id: user.id }] });
                  } else {
                    onChange?.({
                      ...value,
                      data: value?.data?.filter((item) => `${item.id}` !== `${user.id}`),
                    });
                  }
                }}
              >
                {formatUserRender(user)}
              </Checkbox>
            ))}
          </Space>
        </Checkbox.Group>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <Pagination
            total={data?.pagination?.total || 0}
            showTotal={(total) =>
              `${formatMessage({
                id: 'components.ManageAdmin.userDepart.all',
              })} ${total} ${formatMessage({ id: 'components.ManageAdmin.userDepart.item' })}`
            }
            pageSize={size}
            current={page}
            onChange={(current, pageSize) => {
              setPage(current);
              setSize(pageSize);
            }}
          />
        </div>
      </Space>
    );
  };
  useEffect(() => {
    if (show && value?.type === 'User') {
      run();
    }
  }, [run, show, value, page, size, search]);
  const DepartList = () => {
    return (
      <Space direction="vertical" style={{ paddingLeft: 10 }}>
        <DepartSelect
          style={{ width: 500, height: 300 }}
          disabled={disabled}
          value={value?.data?.map((depart) => depart.id)}
          onChange={(ids) => {
            onChange?.({
              ...value,
              data: ids?.map((id) => ({ id })) as { id: number }[],
            });
          }}
        />
      </Space>
    );
  };
  return (
    <Space direction="vertical">
      <Radio.Group
        disabled={disabled}
        value={value?.type}
        onChange={(e) => onChange?.({ ...value, type: e.target.value, data: [] })}
      >
        <Radio value="User">
          {formatMessage({ id: 'components.ManageAdmin.userDepart.user' })}
        </Radio>
        <Radio value="Depart">
          {formatMessage({ id: 'components.ManageAdmin.userDepart.depart' })}
        </Radio>
      </Radio.Group>
      {value?.type === 'User' ? UserList() : DepartList()}
    </Space>
  );
};

export default memo(UserDepart);