import React from 'react';

import { TagField } from '@refinedev/antd';
import { useShow } from '@refinedev/core';

import { CloseOutlined } from '@ant-design/icons';
import { Button, Drawer, Space, Tag, Typography } from 'antd';
import dayjs from 'dayjs';

import styles from '@/styles/show-drawer.module.css';
import { User } from '@/types';

import { UserSelect } from '../queries';

const { Title, Text } = Typography;

interface ShowDrawerProps {
  id?: number;
  onClose: () => void;
}

export const ShowDrawer: React.FC<ShowDrawerProps> = ({ id, onClose }) => {
  const { query } = useShow<User>({
    resource: 'user',
    id,
    meta: {
      select: UserSelect,
    },
  });

  const { data, isLoading, isError } = query;

  if (isError) {
    onClose();
    return null;
  }

  const {
    userid,
    username,
    roles,
    isApiKey,
    apiKey,
    description,
    isActive,
    lastUsedAt,
    creator,
    createdAt,
    updatedAt,
  } = data?.data ?? {};

  return (
    <Drawer
      open
      onClose={onClose}
      loading={isLoading}
      width={756}
      styles={{
        body: { background: '#f5f5f5', padding: 0 },
        header: { display: 'none' },
      }}
    >
      <div className={styles.header}>
        <Button type="text" icon={<CloseOutlined />} onClick={onClose} />
      </div>
      <div className={styles.container}>
        <div key="id">
          <Title level={5}>ID</Title>
          <Text>{id}</Text>
        </div>
        <div key="userid">
          <Title level={5}>User ID</Title>
          <Text>{userid}</Text>
        </div>
        <div key="username">
          <Title level={5}>User Name</Title>
          <Text>{username || '-'}</Text>
        </div>
        <div key="roles">
          <Title level={5}>Roles</Title>
          <Space>
            {(Array.isArray(roles) ? roles : JSON.parse(roles || '[]'))?.map?.(
              (v: string) => (
                <TagField key={v} value={String(v)} />
              ),
            )}
          </Space>
        </div>
        <div key="isApiKey">
          <Title level={5}>Is API Key</Title>
          <Tag color={isApiKey ? 'blue' : 'default'}>
            {isApiKey ? 'Yes' : 'No'}
          </Tag>
        </div>
        {isApiKey && (
          <>
            <div key="apiKey">
              <Title level={5}>API Key</Title>
              <Text
                copyable={{ text: apiKey || '' }}
                style={{ fontFamily: 'monospace' }}
              >
                {apiKey || '-'}
              </Text>
            </div>
            <div key="description">
              <Title level={5}>Description</Title>
              <Text>{description || '-'}</Text>
            </div>
            <div key="lastUsedAt">
              <Title level={5}>Last Used At</Title>
              <Text>
                {lastUsedAt
                  ? dayjs(lastUsedAt).format('YYYY-MM-DD HH:mm:ss')
                  : '-'}
              </Text>
            </div>
          </>
        )}
        <div key="isActive">
          <Title level={5}>Is Active</Title>
          <Tag color={isActive ? 'green' : 'red'}>
            {isActive ? 'Active' : 'Inactive'}
          </Tag>
        </div>
        <div key="creator">
          <Title level={5}>Creator</Title>
          <Text>{creator || '-'}</Text>
        </div>
        <div key="createdAt">
          <Title level={5}>Created At</Title>
          <Text>
            {createdAt ? dayjs(createdAt).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Text>
        </div>
        <div key="updatedAt">
          <Title level={5}>Updated At</Title>
          <Text>
            {updatedAt ? dayjs(updatedAt).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Text>
        </div>
      </div>
    </Drawer>
  );
};
