import * as React from 'react';

import axios from 'src/lib/axios';

import { Users } from 'src/types/zendesk';
import { RequestItem } from 'src/components/Table/RequestsTable';
import { fetchUsersByIds } from 'src/utils';

// export function useUpdateZendeskToken() {
//   const [token, setToken] = React.useState<string | null>(null);

//   React.useEffect(() => {
//     const token = localStorage.getItem('token');
//     if (token) {
//       setToken(token);
//     }
//   }, []);

//   return token;
// }

export function useZendeskMe(token: string) {
  const [data, setData] = React.useState<null | any>(null);
  const [loading, setLoading] = React.useState<boolean>(false);
  const [error, setError] = React.useState<null | any>(null);

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        setError(null);
        const result = await axios
          .get('/api/zendesk/v2/me', {
            headers: {
              Authorization: `${token}`,
            },
          })
          .then((res) => res.data);
        const userData = result?.user;
        if (userData) {
          setData(userData);
        } else {
          throw new Error('No user data found.');
        }
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    if (token) {
      fetchData();
    }
  }, [token]);

  return { data, loading, error };
}

export interface UserRequestItem {
  url: string;
  id: number;
  status: string;
  priority: string;
  type: string | null;
  subject: string;
  description: string;
  organization_id: number;
  via: {
    channel: string;
    source: any;
  };
  custom_fields: { id: number; value: string | null }[];
  requester_id: number;
  collaborator_ids: number[];
  email_cc_ids: number[];
  is_public: boolean;
  due_at: string | null;
  can_be_solved_by_me: boolean;
  created_at: string;
  updated_at: string;
  // "recipient": null,
  followup_source_id: number | null;
  assignee_id: number | null;
  ticket_form_id: number;
  fields: { id: number; value: string | null }[];
}

export interface UserRequestRes {
  requests: UserRequestItem[];
  next_page: string | null;
  previous_page: string | null;
  count: number;
}

export function useZendeskUserRequests(params: {
  type?: 'requested' | 'ccd';
  token: string;
  sort_order?: 'asc' | 'desc';
  page?: number;
}) {
  const { type, token, sort_order, page } = params;

  const [data, setData] = React.useState<UserRequestRes | null>(null);
  const [loading, setLoading] = React.useState<boolean>(false);
  const [error, setError] = React.useState<any>(null);
  const [users, setUsers] = React.useState<Users[]>([]);

  React.useEffect(() => {
    const params: { [x: string]: string } = {
      sort_order: sort_order ?? 'desc',
      page: page ? `${page}` : '1',
    };
    type === 'ccd' && (params.type = 'ccd');
    const fetchTickets = async () => {
      const resData: UserRequestRes = await axios
        .get(`/api/zendesk/v2/requests`, {
          headers: {
            Authorization: `${token}`,
          },
          params,
        })
        .then((res) => res.data.data);
      return resData;
    };
    const fetchData = async () => {
      setLoading(true);
      setData(null);
      setError(null);
      try {
        const resData = await fetchTickets();
        const requesterIdList: number[] = resData.requests.map(
          (item: RequestItem) => item.requester_id
        );
        const uniqueRequesterIdList = [...new Set(requesterIdList)];
        const users = await fetchUsersByIds(uniqueRequesterIdList, token);
        setUsers(users.users);
        setData(resData);
      } catch (e) {
        setData(null);
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    if (type && token) {
      fetchData();
    }
  }, [token, type, sort_order, page]);

  return {
    data,
    users,
    loading,
    error,
  };
}