import SVG from "@/CommonComponent/SVG";
import DataService from "@/Config/Axios";
import { ThemePrimary } from "@/Constant";
import { useAppSelector } from "@/Redux/Hooks";
import { SupportDataType, } from "@/Types/SupportTicketType";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { toast } from "react-toastify";
import SweetAlert from "sweetalert2";

export const SupportData = [
  {
    text: "List of ticket opend by customers",
  },
];

const ListTableAction = ({ id }: { id: string }) => {
  const { i18LangStatus } = useAppSelector((state) => state.langSlice);
  const router = useRouter()
  const displayAlert = () => {
    SweetAlert.fire({
      text: "Are you sure you want to delete this record?",
      showCancelButton: true,
      cancelButtonText: "Cancel!",
      confirmButtonText: "Confirm",
      confirmButtonColor: ThemePrimary,
    }).then(async (result) => {
      if (result.isConfirmed) {
        try {
          const response = await DataService.delete(`/support/${id}`)
          if (response.data.status) {
            toast.success(response.data.message)
            router.refresh();
          }
        } catch (error: any) {
          toast.error(error?.response?.data?.message ?? "Something went wrong!")
        }
      }
    });
  };
  return (
    <div className="product-action d-flex align-items-center">
      <Link href={`/${i18LangStatus}/support_tickets/view/${id}`}>
        <i className="fa fa-eye" style={{ color: "gray" }}></i>
      </Link>
      <SVG iconId="trash1" onClick={displayAlert} />
    </div>
  );
};
export const TicketData = [
  {
    id: 2,
    title: "Pending",
    num: 8943,
    class: "bg-secondary",
  },
  {
    id: 3,
    title: "Running",
    num: 2500,
    class: "bg-warning",
  },
  {
    id: 5,
    title: "Done",
    num: 5600,
    class: "bg-success",
  },
  {
    id: 6,
    title: "Cancel",
    num: 2560,
    class: "bg-danger",
  },
];


export const SupportColumnData = [
  {
    name: "Ticket Number",
    selector: (row: SupportDataType) => row["ticketNumber"],
    sortable: true,
    center: false,
    cell: (row: SupportDataType) => <Link href={`support_tickets/view/${row['_id']}`}>{row["ticketNumber"]}</Link>,
  },
  {
    name: "Subject",
    selector: (row: SupportDataType) => row["subject"],
    sortable: true,
  },
  {
    name: "Message",
    selector: (row: SupportDataType) => row["message"],
    sortable: true,
  },
  {
    name: "Date",
    selector: (row: SupportDataType) => row["createdAt"],
    cell: (row: SupportDataType) => (new Date(row["createdAt"])?.toLocaleString()),
    sortable: true,
    sortField: 'createdAt',
  },
  {
    name: "Status",
    selector: (row: SupportDataType) => row["status"],
    sortable: true,
    cell: (row: SupportDataType) => <div style={{ width: "5rem", textAlign: 'center' }} className={`p-2 rounded badge-light-${row['status'] !== "closed" ? "secondary" : "primary"}`}    >{row["status"]}</div>,
  },
  {
    name: "Action",
    cell: (row: SupportDataType) => <ListTableAction id={row["_id"]} />,
  },
];