import * as React from 'react';
import Link from 'next/link';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
import Divider from '@mui/material/Divider';
import Skeleton from '@mui/material/Skeleton';

import axios from 'src/lib/axios';
import RequestEditDialog from 'src/components/Dialog/RequestEditDialog';
import TicketStatusChips, {
  TicketStatusType,
} from 'src/components/Chip/TicketStatus';
import { Users } from 'src/types/zendesk';

import { auth0MetaState, zendeskDataState } from 'src/atom';
import { useRecoilValue } from 'recoil';

export interface RequestDetailsCardProps {
  data: {
    url: string;
    id: number;
    status: string;
    priority: string;
    // type: null,
    subject: string;
    description: string;
    organization_id: number;
    // via: { channel: 'api', source: [Object] },
    // custom_fields: [ [Object] ],
    requester_id: number;
    collaborator_ids: number[];
    email_cc_ids: number[];
    is_public: boolean;
    // due_at: null,
    can_be_solved_by_me: boolean;
    created_at: string;
    updated_at: string;
    // recipient: null,
    // followup_source_id: null,
    // assignee_id: null,
    // ticket_form_id: 9434033311895,
    // fields: [ [Object] ]
  };
}

const DetailItem = (props: {
  title: string;
  value: string | number;
  EditEle?: JSX.Element;
}) => {
  const { title, value, EditEle } = props;

  return (
    <Box
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: '1rem',
        width: '100%',
      }}
    >
      <Typography
        color="text.primary"
        sx={{
          width: '30%',
        }}
      >
        {title}
      </Typography>
      <Typography color="text.secondary" component="div">
        {value}
      </Typography>
      {!!EditEle && EditEle}
    </Box>
  );
};

const findUserDetails = (users: Users[], id: number) => {
  const user = users.find((user) => user.id === id);
  return user;
};

const findUsersNames = (users: Users[], ids: number[]) => {
  const names = ids.map((id) => {
    const user = users.find((user) => user.id === id);
    return user?.name;
  });
  return names;
};

export default function RequestDetailsCard(props: RequestDetailsCardProps) {
  const { data } = props;
  const [users, setUsers] = React.useState<Users[]>([]);
  const [loading, setLoading] = React.useState<boolean>(true);

  const zendeskData = useRecoilValue(zendeskDataState);

  const idListMemo = React.useMemo(() => {
    const idList = [
      data.requester_id,
      ...data.collaborator_ids,
      ...data.email_cc_ids,
    ];
    return [...new Set(idList)];
  }, [data]);

  React.useEffect(() => {
    const fetchUsersByIds = async (ids: number[], token: string) => {
      try {
        const data = await axios
          .get('/api/zendesk/v2/users/show_many', {
            params: {
              ids: ids.join(','),
            },
            headers: {
              Authorization: token,
            },
          })
          .then((res) => res.data as { users: Users[] });
        setUsers(data.users);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };
    if (zendeskData.token && idListMemo.length > 0) {
      fetchUsersByIds(idListMemo, zendeskData.token);
    }
  }, [idListMemo, zendeskData.token]);

  return (
    <Card sx={{ minWidth: 275 }}>
      <CardContent>
        <Typography
          color="text.secondary"
          gutterBottom
          component="div"
          sx={{
            fontSize: 14,
            display: 'flex',
            alignItems: 'center',
            gap: '1rem',
          }}
        >
          {`#${data.id}`}
          <TicketStatusChips type={data.status as TicketStatusType} />
        </Typography>
        <Divider />

        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: '1rem',
            mt: '1rem',
          }}
        >
          {loading ? (
            <>
              {new Array(4).fill(0).map((_, i) => (
                <Skeleton key={i} variant="text" />
              ))}
            </>
          ) : (
            <>
              <DetailItem
                title="Requester"
                value={
                  findUserDetails(users, data.requester_id)?.name ||
                  data.requester_id
                }
              />
              <DetailItem
                title="created_at"
                value={`${new Date(data.created_at).toLocaleString()}`}
              />
              <DetailItem
                title="updated_at"
                value={`${new Date(data.updated_at).toLocaleString()}`}
              />
              <DetailItem
                title="CCs"
                value={
                  findUsersNames(users, data.email_cc_ids)?.join(', ') ||
                  `${data.email_cc_ids}`
                }
                EditEle={
                  <RequestEditDialog type="CC" users={users} data={data} />
                }
              />
            </>
          )}
        </Box>
      </CardContent>
      {/* <CardActions>
        <Button size="small">Learn More</Button>
      </CardActions> */}
    </Card>
  );
}