import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Typography,
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Grid } from "../grid/Grid";
import { SPACING } from "../../data/spacing";

const styles = {
  tableInNewPage: {
    pageBreakAfter: "always",
    paddingLeft: "40px",
    paddingRight: "40px",
    direction: "rtl",
    fontFamily: "titr",
    fontWeight: "bold",
  },
  container: {
    width: "95%",
    alignSelf: "center",
    pageBreakInside: "avoid",
  },

  invoiceTable: {
    width: "100%",
    borderCollapse: "collapse",
    alignSelf: "center",
    fontFamily: "titr",
    marginBottom: "5px",
    marginTop: "15px",
    borderRadius: "10px",
  },
  tableCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 12,
    fontWeight: "bolder",
    color: "#403e3e",
  },
  tableCellGreen: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 12,
    color: "white",
    fontWeight: "bolder",
    backgroundColor: "rgba(26, 188, 156, 0.7)",
  },
  tableCellMobile: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 12,
  },
  tableInnerCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 9,
    whiteSpace: "nowrap",
  },
  tableHeader: {
    backgroundColor: "rgba(211, 211, 211, 0.3)",
    pageBreakAfter: "auto",
  },
  headerRow: {
    background: "linear-gradient(to right, #E684AE, #79CBCA, #77A1D3)",
    backgroundColor: "rgba(232, 67, 147, 0.4)",
    color: "#422020",
    pageBreakInside: "avoid",
    pageBreakAfter: "auto",
  },

  tableHeaderCell: {
    fontSize: 14,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bolder",
  },
  tableHeaderCellGreen: {
    backgroundColor: "rgba(26, 188, 156, 0.7)",
    fontSize: 12,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bolder",
    color: "white",
  },
  footer: {
    left: 0,
    bottom: 0,
    width: "100%",
    position: "absolute",
  },
  footerContainer: {
    alignItems: "center",
    display: "flex",
  },

  tableRowEven: {
    backgroundColor: "rgba(170, 183, 255, 0.3)",
  },
  titleOfTable: {
    marginRight: "20px",
    fontSize: "15px",
  },
  tableCellAlert: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 12,
    color: "red",
  },
  levelDetails: {
    color: "red",
    fontSize: 12,
  },
};

export const RowItemCity = ({ item }) => {
  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        className="row-item-table-accordion"
      >
        <Typography>مرحله شهرستان</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Grid mt={SPACING.SMALL}>
          <Typography variant={"body2"}>مرحله شهرستان</Typography>
          <table style={styles.invoiceTable}>
            <thead style={styles.tableHeader}>
              <tr style={styles.headerRow}>
                <th style={styles.tableHeaderCell}>اپراتور</th>
                <th style={styles.tableHeaderCell}>سمت</th>
                <th style={styles.tableHeaderCell}>تلفن</th>
                <th style={styles.tableHeaderCell}>تعاونی مرغدار</th>
                <th style={styles.tableHeaderCell}>آدرس</th>
                <th style={styles.tableHeaderCell}>وضعیت</th>
              </tr>
            </thead>
            {item?.city_state?.date ? (
              <tbody>
                <tr style={styles.tableRow}>
                  <td style={styles.tableCell}>
                    {item?.city_state?.city_operator_fullname}
                  </td>
                  <td style={styles.tableCell}>اپراتور شهرستان</td>
                  <td style={styles.tableCell}>
                    {item?.city_state?.city_operator_mobile}
                  </td>
                  <td style={styles.tableCell}>{item?.city_state?.poultry}</td>
                  <td style={styles.tableCell}>
                    {item?.city_state?.province +
                      " - " +
                      item?.city_state?.city}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.city_state?.state === "accept"
                      ? "تایید شده"
                      : "رد شده"}
                  </td>
                </tr>
              </tbody>
            ) : (
              <td style={styles.tableCellAlert} colSpan={6}>
                هنوز شهرستان پرونده را تائید نکرده است
              </td>
            )}
          </table>
        </Grid>
      </AccordionDetails>
    </Accordion>
  );
};
