Untitled

// Imports
import { FC, useEffect, useState } from "react"
import { useLazyQuery, useMutation, useQuery } from "@apollo/client"
import CloseIcon from "@mui/icons-material/Close"
import PaIcon from "@mui/icons-material/ReplyOutlined"
import { Button } from "@mui/material"
import { Box } from "@mui/system"
import { GridColDef } from "@mui/x-data-grid-pro"

import { gql } from "../../../__generated__"
import {
  CategoryTypesEnum,
  RequestStatus,
  SubmitType,
} from "../../../__generated__/graphql"
import { useAlert } from "../../atoms/alertContext"
import { ApproveModalProvider } from "../../atoms/approveModalContext"
import ReusableDataGrid from "../../molecules/reusableDataGrid"
import { ReusableNavigationBar } from "../../molecules/reusableNavigationBar"
import AddCategoryModal from "../../organisms/addCategoryModal"
import EditCategoryModal from "../../organisms/editCategoryModal"

// GraphQl Query
const approvedCategoryQuery = gql(/* GraphQL */ `
  query approvedCategoryQuery($statusId: RequestStatus!, $groupType: String!) {
    groups(statusId: $statusId, groupType: $groupType) {
      id
      name
      type
      versionId
      statusId
      isDeleted
      description
      createdDate
      createdById
      updatedDate
      updatedById
      groupCountries {
        id
        versionId
        countryId
        country {
          id
          name
        }
      }
      status {
        name
        description
      }
    }
  }
`)

const fetchGroupRevisionById = gql(/* GraphQL */ `
  query fetchGroupRevisionById(
    $statusId: RequestStatus!
    $groupType: String!
    $groupId: Int
  ) {
    groups(statusId: $statusId, groupType: $groupType, groupId: $groupId) {
      id
      name
      type
      versionId
      statusId
      isDeleted
      description
      createdDate
      createdById
      updatedDate
      updatedById
      groupCountries {
        id
        versionId
        countryId
        country {
          id
          name
        }
      }
      status {
        name
        description
      }
    }
  }
`)

const generateCategoryQuery = gql(/* GraphQL */ `
  query groupRevision(
    $groupType: String!
    $revisionStatusIds: [RequestStatus!]!
    $currentRecord: Int
  ) {
    groupRevision(
      groupType: $groupType
      revisionStatusIds: $revisionStatusIds
      currentRecord: $currentRecord
    ) {
      id
      groupId
      groupName
      groupType
      actionType
      statusId
      isDeleted
      createdDate
      createdById
      updatedDate
      updatedById
      groupCountries {
        id
        versionId
        countryId
        country {
          id
          name
        }
      }
      status {
        name
        description
      }
    }
  }
`)

//mutation for Approve
const approve_CategoryMutation = gql(/* GraphQL */ `
  mutation approve_CategoryMutation($input: [ApproveCategoryOrTopicInput!]!) {
    approveCategoryOrTopic(input: $input) {
      success
      message
    }
  }
`)

//mutation for Reject
const reject_CategoryMutation = gql(/* GraphQL */ `
  mutation reject_CategoryMutation($input: [RejectCategoryOrTopicInput!]!) {
    rejectCategoryOrTopic(input: $input) {
      success
      message
    }
  }
`)

//mutation for Restore
const restore_CategoryOrTopicMutation = gql(/* GraphQL */ `
  mutation restore_CategoryOrTopicMutation(
    $input: [DeleteOrRestoreCategoryOrTopicInput!]!
  ) {
    deleteOrRestoreCategoryOrTopic(input: $input) {
      groupId
      success
      message
    }
  }
`)

//mutation for Delete
const delete_CategoryOrTopicMutation = gql(/* GraphQL */ `
  mutation delete_CategoryOrTopicMutation(
    $input: [DeleteOrRestoreCategoryOrTopicInput!]!
  ) {
    deleteOrRestoreCategoryOrTopic(input: $input) {
      groupId
      success
      message
    }
  }
`)

// InterFace to avoid type any
export interface Category {
  id: string
  name: string
  type: string
  versionId: number
  statusId: number
  isDeleted: number
  description: string
  createdDate: string
  createdById: number
  updatedDate: string
  updatedById: number
  status?: {
    name: string
    description: string
  }
  groupCountries: {
    id: number
    versionId: number
    countryId: number
    country: {
      id: number
      name: string
    }
  }[]
}

interface GridCategory extends Category {
  id: string
}

interface selectedCategoryRow extends Category {
  id: string
  groupId?: number
  countryId?: number
  type: string
}
//
export type CategoriesTab = "approved" | "underReview" | "rejected"
export const CategoriesPage: FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false) // State for Edit Assign Modal
  const [isAddModalOpen, setIsAddModalOpen] = useState(false) // State for Add AssignTopicCat Modal
  const [editSelectedRow, setEditSelectedRow] = useState<Category | null>(null) //State to hande Edit button data
  // const [activeBar, setActiveBar] = useState(1) // 1 for Bar1, 2 for Bar2, 3 for Bar3
  const [activeBar, setActiveBar] = useState<CategoriesTab>("approved")
  const { showAlert } = useAlert()
  const [gridData, setGridData] = useState<any[]>([])

  //Approve, Reject, Restore Mutation Execution
  const [approveCategory] = useMutation(approve_CategoryMutation)
  const [rejectCategory] = useMutation(reject_CategoryMutation)
  const [restoreCategory] = useMutation(restore_CategoryOrTopicMutation)
  const [deleteCategory] = useMutation(delete_CategoryOrTopicMutation)

  //Query Execution
  const { data: bar1Data, refetch: refetchBar1 } = useQuery(
    approvedCategoryQuery,
    {
      variables: {
        statusId: RequestStatus.Approved,
        groupType: CategoryTypesEnum.Category,
      },
      skip: activeBar !== "approved",
      fetchPolicy: "network-only", // Ensure fresh data
    },
  )
  const { data: bar2Data, refetch: refetchBar2 } = useQuery(
    generateCategoryQuery,
    {
      variables: {
        groupType: CategoryTypesEnum.Category,
        revisionStatusIds: [
          RequestStatus.PendingChange,
          RequestStatus.PendingNew,
        ],
        currentRecord: 1,
      },
      skip: activeBar !== "underReview",
      fetchPolicy: "network-only", // Ensure fresh data
    },
  )
  const { data: bar3Data, refetch: refetchBar3 } = useQuery(
    generateCategoryQuery,
    {
      variables: {
        groupType: CategoryTypesEnum.Category,
        revisionStatusIds: [
          RequestStatus.RejectChange,
          RequestStatus.RejectNew,
        ],
        currentRecord: 0,
      },
      skip: activeBar !== "rejected",
      fetchPolicy: "network-only", // Ensure fresh data
    },
  )
  const [fetchGroupRevision] = useLazyQuery(fetchGroupRevisionById)

  useEffect(() => {
    let newData: GridCategory[] = []
    switch (activeBar) {
      case "approved":
        newData =
          bar1Data?.groups.map((item: any) => ({
            id: item.id,
            name: item.name,
            type: item.type,
            versionId: item.versionId,
            description: item.description,
            statusId: item.statusId,
            createdDate: item.createdDate,
            createdById: item.createdById,
            updatedDate: item.updatedDate,
            updatedById: item.updatedById,
            groupCountries: item.groupCountries,
            isDeleted: item.isDeleted,
          })) || []
        break
      case "underReview":
        newData =
          bar2Data?.groupRevision.map((item: any) => ({
            versionId: item.id,
            id: item.groupId,
            name: item.groupName,
            type: item.groupType,
            statusId: item.statusId,
            description: item.description,
            createdDate: item.createdDate,
            createdById: item.createdById,
            updatedDate: item.updatedDate,
            updatedById: item.updatedById,
            groupCountries: item.groupCountries,
            isDeleted: item.isDeleted,
            recordType: item.status?.name === "Pending New" ? "New" : "Change",
          })) || []
        break
      case "rejected":
        newData =
          bar3Data?.groupRevision.map((item: any) => ({
            versionId: item.id,
            id: item.groupId,
            name: item.groupName,
            type: item.groupType,
            statusId: item.statusId,
            description: item.description,
            createdDate: item.createdDate,
            createdById: item.createdById,
            updatedDate: item.updatedDate,
            updatedById: item.updatedById,
            groupCountries: item.groupCountries,
            isDeleted: item.isDeleted,
            recordType: item.status?.name === "Reject New" ? "New" : "Change",
          })) || []
        break
      default:
        newData = []
    }

    setGridData(newData)
  }, [activeBar, bar1Data, bar2Data, bar3Data])
  //handle bar click
  const handleBarClick = (tab: CategoriesTab) => {
    setActiveBar(tab)
    setGridData([])
  }
  //handle Edit click
  const handleEditClick = (rowData: Category) => {
    setEditSelectedRow(rowData)
    setIsModalOpen(true) // Open the modal
  }
  const handlePaIconClick = async (row: Category) => {
    const { data } = await fetchGroupRevision({
      variables: {
        groupId: Number(row.id),
        statusId: RequestStatus.Approved,
        groupType: CategoryTypesEnum.Category,
      },
    })