import React from "react";
import { Accordion, AccordionSummary, Typography, Grid } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { motion } from "framer-motion";
import { getFaUserRole } from "../../../utils/getFaUserRole";
import { getIconUserRole } from "../../../utils/getRoleIcon";

export const RoleAccordion = React.memo(
  ({ role, open, isExpanded, onToggle, children }) => {
    return (
      <Accordion
        style={{
          borderRadius: "8px",
        }}
      >
        <AccordionSummary
          onClick={onToggle}
          expandIcon={
            <ExpandMoreIcon
              style={{
                display: open ? "flex" : "none",
                color: isExpanded ? "#fff" : "#273c75",
              }}
            />
          }
          style={{
            backgroundColor: isExpanded ? "#0fb9b1" : "#dfe6e9",
            boxShadow: isExpanded ? "inset 0 0 2px rgba(0,0,0,0.75)" : "none",
          }}
        >
          {open ? (
            <motion.div
              initial="closed"
              animate="open"
              variants={{
                open: {
                  opacity: 1,
                  x: 0,
                  transition: {
                    opacity: { duration: 0.4 },
                    x: { type: "spring", stiffness: 200, damping: 25 },
                  },
                },
                closed: {
                  opacity: 0,
                  x: 100,
                  transition: {
                    opacity: { duration: 0.4 },
                    x: { type: "spring", stiffness: 200, damping: 25 },
                  },
                },
              }}
              style={{
                whiteSpace: "nowrap",
                display: "flex",
                alignItems: "center",
              }}
            >
              <Grid container spacing={2} alignItems="center">
                <Grid item>
                  <Typography
                    variant="body2"
                    style={{
                      color: isExpanded ? "white" : "#273c75",
                    }}
                  >
                    {getIconUserRole(role)}
                  </Typography>
                </Grid>
                <Grid item>
                  <Typography
                    fontWeight="bold"
                    variant="body2"
                    style={{
                      color: isExpanded ? "white" : "#273c75",
                    }}
                  >
                    {getFaUserRole(role)}
                  </Typography>
                </Grid>
              </Grid>
            </motion.div>
          ) : (
            <Typography
              fontWeight="bold"
              variant="body1"
              style={{
                color: isExpanded ? "#fff" : "#273c75",
              }}
            >
              {getIconUserRole(role)}
            </Typography>
          )}
        </AccordionSummary>
        <Grid container xs={12} style={{ backgroundColor: "rgb(239 239 240)" }}>
          {children}
        </Grid>
      </Accordion>
    );
  }
);

RoleAccordion.displayName = "RoleAccordion";
