import React, { useCallback, useEffect, useState } from "react";
import {
  TableContainer,
  Table,
  TableBody,
  TableCell,
  TableRow,
  Card,
  CardContent,
  Typography,
  Divider,
  Stack,
  Box,
  Button,
} from "@mui/material";
import { FaEdit } from "react-icons/fa";
import { vendorInfoes } from "../../../services/axios/allApi";
import Image from "next/image";
import UpdateMyInfoModal from "./UpdateMyInfo";
import ToastSnackbar from "../../common/toast-snackbar/ToastSnackbar";

const MyAcInfo = () => {
  // modal trigger
  const [open, setOpen] = useState(false);
  const handleModalOpen = () => setOpen(true);

  const [vendorInfo, setVendorInfo] = useState();

  // toast
  const [toastMsg, setToastMsg] = useState("");
  const [toastType, setToastType] = useState("");

  const getVendorInfo = useCallback(async () => {
    try {
      const vendorInfoRes = await vendorInfoes();
      setVendorInfo(vendorInfoRes?.data?.data);
    } catch (err) {
      console.log(err);
    }
  }, []);

  useEffect(() => {
    getVendorInfo();
  }, [getVendorInfo]);

  // table data
  function createData(title, info) {
    return { title, info };
  }

  const rows = [
    createData("Vendor Name", vendorInfo?.vendor?.shop_name),
    createData("Email", vendorInfo?.user?.email),
    createData("Address", vendorInfo?.vendor?.shop_address),
    createData("Contact No.", vendorInfo?.vendor?.shop_phone),
    createData("Profile Image", vendorInfo?.vendor?.profile_pic),
    createData("Cover Image", vendorInfo?.vendor?.cover_pic),
  ];

  return (
    <Card sx={{ borderRadius: "12px" }}>
      <CardContent sx={{ p: "16px !important" }}>
        <Stack direction="row" justifyContent={"space-between"} spacing={2}>
          <Box>
            <Typography component="h4" p={2} fontWeight={600} fontSize={"18px"}>
              Vendor Information
            </Typography>
          </Box>
          <Box>
            <Button variant="contained" onClick={handleModalOpen}>
              <FaEdit style={{ marginRight: "8px" }} /> Edit Info
            </Button>
            {/* modal */}
            {open && (
              <UpdateMyInfoModal
                open={open}
                setOpen={setOpen}
                title={"Update Account Information"}
                vendorInfo={vendorInfo}
                getVendorInfo={getVendorInfo}
                setToastMsg={setToastMsg}
                setToastType={setToastType}
              />
            )}
          </Box>
        </Stack>

        <Divider />

        {/* info table */}
        <TableContainer>
          <Table aria-label="simple table">
            <TableBody>
              {rows.map((row) => (
                <TableRow
                  key={row.title}
                  sx={{
                    "&:last-child td, &:last-child th": {
                      border: 0,
                    },
                  }}
                >
                  <TableCell component={"th"}>{row.title}</TableCell>
                  <TableCell>
                    {row?.title != "Profile Image" &&
                    row?.title != "Cover Image"
                      ? row.info
                      : row?.info && (
                          <Image
                            src={process.env.IMAGE_URL + row.info}
                            width={"100px"}
                            height={"100px"}
                            objectFit="contain"
                          />
                        )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>

        {/* toast */}
        {toastMsg !== "" && (
          <ToastSnackbar
            toastMsg={toastMsg}
            setToastMsg={setToastMsg}
            severity={toastType !== "" ? toastType : "info"}
          />
        )}
      </CardContent>
    </Card>
  );
};

export default MyAcInfo;