import axios from 'axios';
import { ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { BranchContact, BranchContactCreate } from './types';
import { Pagination } from '../types';
import { api } from 'src/boot/axios';

type BranchContactId = string;

const useBranchContactStore = defineStore('api-branch-contact', () => {
  const data = ref<Pagination<BranchContact[]>>({
    result: [],
    page: 0,
    pageSize: 0,
    total: 0,
  });
  const map = ref<Record<BranchContactId, BranchContact>>({});

  watch(data, () => {
    data.value.result.forEach((v) => {
      map.value[v.id] = v;
    });
  });

  async function fetchList(
    branchId: string,
    opts?: {
      page?: number;
      pageSize?: number;
    },
    flow?: {
      sessionId: string;
      refTransactionId: string;
      transactionId: string;
    },
  ) {
    const params = new URLSearchParams();

    if (opts?.pageSize && opts?.pageSize > 0) {
      params.append('pageSize', `${opts.pageSize}`);
    }
    if (opts?.page && opts.page > 0) params.append('page', `${opts.page}`);

    const query = params.toString();

    const res = await api.get<Pagination<BranchContact[]>>(
      `/branch/${branchId}/contact${(params && '?'.concat(query)) || ''}`,
      {
        headers: {
          'X-Session-Id': flow?.sessionId,
          'X-Rtid': flow?.refTransactionId,
          'X-Tid': flow?.transactionId,
        },
      },
    );

    if (res && res.status === 200) {
      data.value = res.data;
      return data.value;
    }
    return false;
  }

  async function create(
    branchId: string,
    data: BranchContactCreate,
    qrCodeImage?: File | null, // required but not strict
    flow?: {
      sessionId: string;
      refTransactionId: string;
      transactionId: string;
    },
  ) {
    const { ...payload } = data;

    const res = await api.post<
      BranchContact & { qrCodeImageUploadUrl: string }
    >(`/branch/${branchId}/contact`, payload, {
      headers: {
        'X-Session-Id': flow?.sessionId,
        'X-Rtid': flow?.refTransactionId,
        'X-Tid': flow?.transactionId,
      },
    });

    qrCodeImage &&
      (await axios
        .put(res.data.qrCodeImageUploadUrl, qrCodeImage, {
          headers: { 'Content-Type': qrCodeImage.type },
          onUploadProgress: (e) => console.log(e),
        })
        .catch((e) => console.error(e)));

    if (!res) return false;

    return res.data;
  }

  async function editById(
    branchId: string,
    contactId: string,
    data: Partial<BranchContactCreate>,
    qrCodeImage?: File,
    flow?: {
      sessionId: string;
      refTransactionId: string;
      transactionId: string;
    },
  ) {
    const { ...payload } = data;

    const res = await api.put<BranchContact & { qrCodeImageUploadUrl: string }>(
      `/branch/${branchId}/contact/${contactId}`,
      payload,
      {
        headers: {
          'X-Session-Id': flow?.sessionId,
          'X-Rtid': flow?.refTransactionId,
          'X-Tid': flow?.transactionId,
        },
      },
    );

    if (qrCodeImage) {
      await axios
        .put(res.data.qrCodeImageUploadUrl, qrCodeImage, {
          headers: { 'Content-Type': qrCodeImage.type },
          onUploadProgress: (e) => console.log(e),
        })
        .catch((e) => console.error(e));
    }

    if (!res) return false;

    return res.data;
  }

  async function deleteById(
    branchId: string,
    contactId: string,
    flow?: {
      sessionId: string;
      refTransactionId: string;
      transactionId: string;
    },
  ) {
    const res = await api.delete<
      BranchContact & { qrCodeImageUploadUrl: string }
    >(`/branch/${branchId}/contact/${contactId}`, {
      headers: {
        'X-Session-Id': flow?.sessionId,
        'X-Rtid': flow?.refTransactionId,
        'X-Tid': flow?.transactionId,
      },
    });

    if (!res) return false;

    return res.data;
  }

  return {
    data,
    map,
    fetchList,
    create,
    editById,
    deleteById,
  };
});

export default useBranchContactStore;