import { useState, useEffect } from "react";
import { Tabs, Tab, TextField, Typography } from "@mui/material";
import ShowImage from "../../../../components/show-image/ShowImage";
import { Grid } from "../../../../components/grid/Grid";

export const ProvinceBarDifferencesModal = ({ item }) => {
  const [tabIndex, setTabIndex] = useState(0);

  const handleTabChange = (event, newValue) => {
    setTabIndex(newValue);
  };

  const tabs = [];
  if (item?.registerMessage || item?.violationImage?.[0]) {
    tabs.push({ key: "register", label: "درخواست کننده" });
  }
  if (item?.acceptorMessage || item?.acceptorImage?.[0]) {
    tabs.push({ key: "acceptor", label: "کشتارگاه" });
  }

  useEffect(() => {
    if (tabIndex >= tabs.length) {
      setTabIndex(0);
    }
  }, [tabs.length, tabIndex]);

  return (
    <Grid
      container
      xs={12}
      flexDirection="column"
      sx={{ width: "100%", justifyContent: "center", alignItems: "center" }}
    >
      <Tabs value={tabIndex} onChange={handleTabChange} centered>
        {tabs.map((t, idx) => (
          <Tab key={t.key} label={t.label} />
        ))}
      </Tabs>

      {tabs[tabIndex]?.key === "register" && (
        <Grid container sx={{ padding: 2, width: "100%", marginTop: "10px" }}>
          {item?.registerMessage && (
            <TextField
              label="پیغام درخواست کننده"
              value={item?.registerMessage}
              fullWidth
              multiline
              variant="outlined"
              InputProps={{
                readOnly: true,
                style: { color: "black" },
              }}
              sx={{
                backgroundColor: "white",
                "& .MuiOutlinedInput-notchedOutline": {
                  borderColor: "#c4c4c4",
                },
              }}
            />
          )}

          {item?.violationImage?.[0] && (
            <Grid
              item
              mt={2}
              sx={{
                width: "100%",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                gap: "5px",
              }}
            >
              <Typography variant="subtitle2" sx={{ mb: 1 }}>
                پیوست درخواست کننده:
              </Typography>
              <ShowImage src={item?.violationImage[0]} />
            </Grid>
          )}
        </Grid>
      )}

      {tabs[tabIndex]?.key === "acceptor" && (
        <Grid container sx={{ padding: 2, width: "100%" }}>
          {item?.acceptorMessage && (
            <TextField
              label="پیغام کشتارگاه"
              value={item?.acceptorMessage}
              fullWidth
              multiline
              variant="outlined"
              InputProps={{
                readOnly: true,
                style: { color: "black" },
              }}
              sx={{
                backgroundColor: "white",
                "& .MuiOutlinedInput-notchedOutline": {
                  borderColor: "#c4c4c4",
                },
              }}
            />
          )}

          {item?.acceptorImage?.[0] && (
            <Grid
              item
              mt={2}
              sx={{
                width: "100%",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                gap: "5px",
              }}
            >
              <Typography variant="subtitle2" sx={{ mb: 1 }}>
                پیوست کشتارگاه:
              </Typography>
              <ShowImage src={item?.acceptorImage[0]} />
            </Grid>
          )}
        </Grid>
      )}
    </Grid>
  );
};
