Untitled

import { ArrowBack, Edit, ExpandMore } from "@mui/icons-material";
import { AccordionDetails, Box, Grid } from "@mui/material";
import { AccordionSummary } from "@mui/material";
import { Accordion, Divider, Paper, Stack, Typography } from "@mui/material";
import { grey } from "@mui/material/colors";
import React, { useState } from "react";
import SelectResponsiblePerson from "../../Survey/components/SelectResponsiblePerson";
import { Snackbar } from "@mui/material";
import { Alert } from "@mui/material";

const ResponsiblePersonDetail = () => {
  const [organizationsLoading, setOrganizationsLoading] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);

  return (
    <>
      <Stack
        direction="row"
        spacing={1}
        bgcolor="white"
        justifyContent="start"
        alignItems="center"
        py={1}
        px={3}
      >
        <ArrowBack />
        <Typography variant="subtitle1">Project - De Blink 111</Typography>
      </Stack>
      <Stack width="100%" height="100%" spacing={2} bgcolor={grey[100]} p={2}>
        <Paper sx={{ width: "100%", bgcolor: "white" }} elevation={0}>
          <Typography p={1} px={2} variant="h6">
            Verantwoordelijke persoon
          </Typography>
          <Divider />

          <Grid xs={12} container p={1}>
            <Grid
              xs={12}
              md={4}
              p={1}
              borderRight="1px dashed"
              borderColor={grey[200]}
            >
              <Typography variant="subtitle2">Algemeen</Typography>
              <Box pt={2}>
                <Stack direction="row" justifyContent="space-between">
                  <Typography width="50%" variant="caption" color={grey[600]}>
                    Nazorg
                  </Typography>
                  <Stack
                    width="50%"
                    direction="row"
                    justifyContent="space-between"
                  >
                    <Typography variant="caption">xyz</Typography>
                    <Edit
                      color={grey[600]}
                      onClick={(e) => setAnchorEl(e.currentTarget)}
                      sx={{ fontSize: "medium" }}
                    />
                  </Stack>
                </Stack>
                <Stack
                  width="100%"
                  direction="row"
                  justifyContent="space-between"
                >
                  <Typography width="50%" variant="caption" color={grey[600]}>
                    Sitebeheerder
                  </Typography>
                  <Stack
                    width="50%"
                    direction="row"
                    justifyContent="space-between"
                  >
                    <Typography variant="caption">xyz</Typography>
                    <Edit
                      color={grey[600]}
                      onClick={(e) => setAnchorEl(e.currentTarget)}
                      sx={{ fontSize: "medium" }}
                    />
                  </Stack>
                </Stack>
              </Box>
            </Grid>
          </Grid>
        </Paper>

        <Accordion defaultExpanded>
          <AccordionSummary sx={{ margin: "0px" }} expandIcon={<ExpandMore />}>
            <Typography variant="h6">Kaartinformatie</Typography>
          </AccordionSummary>
          <Divider />
          <AccordionDetails sx={{ p: 1 }}>
            <Grid container xs={12}>
              <Grid
                xs={12}
                md={4}
                p={1}
                borderRight="1px dashed"
                borderColor={grey[200]}
              >
                <Typography variant="subtitle2">Mutatiehistorie</Typography>
                <Box pt={2}>
                  <Stack
                    width="100%"
                    direction="row"
                    justifyContent="space-between"
                  >
                    <Stack width="50%">
                      <Typography variant="caption" color={grey[600]}>
                        Ingevoerd op:
                      </Typography>
                    </Stack>
                    <Stack width="50%">
                      <Typography variant="caption">
                        10-4-2024 09:39:58
                      </Typography>
                    </Stack>
                  </Stack>
                  <Stack direction="row">
                    <Typography width="50%" variant="caption" color={grey[600]}>
                      Ingevoerd door:
                    </Typography>
                    <Typography width="50%" variant="caption">
                      JPDS
                    </Typography>
                  </Stack>
                  <Stack direction="row" justifyContent="space-between">
                    <Typography width="50%" variant="caption" color={grey[600]}>
                      Gewijzigd op:
                    </Typography>
                    <Typography width="50%" variant="caption">
                      10-4-2024 09:39:58
                    </Typography>
                  </Stack>
                  <Stack direction="row">
                    <Typography width="50%" variant="caption" color={grey[600]}>
                      Gewijzigd door:
                    </Typography>
                    <Typography width="50%" variant="caption">
                      Johan van Eijsden
                    </Typography>
                  </Stack>
                  <Stack direction="row">
                    <Typography width="50%" variant="caption" color={grey[600]}>
                      Sleutelwaarde:
                    </Typography>
                    <Typography width="50%" variant="caption">
                      0014971A-BED1-4C86-BBD9-99AF2AA3FE36
                    </Typography>
                  </Stack>
                </Box>
              </Grid>
            </Grid>
          </AccordionDetails>
        </Accordion>

        <SelectResponsiblePerson
          // isSecondSignature={isSecondSignature}
          // projectId={projectId}
          // customTitle={customTitle}
          // surveyIds={surveyData && [surveyData.surveyId]}
          // forSurvey={canChangeExecutorForSurvey}
          // hideExtraInfo={hideExtraInfo}
          // isCanSendToWB
          // canCreateRepairRequest={repairRequestRight}
          // onSubmit={(values) => handleChangeResponsiblePerson(values)}
          // customOplosser
          // closeModal={props.onClose}
          setLoading={(val) => setOrganizationsLoading(val)}
          loading={organizationsLoading}
          forRepairRequests
          repairRequestIds={["12", "12"]}
          anchorEl={anchorEl}
          onClose={() => {
            setAnchorEl(null);
            // anchorElModal && data && !data.userInformation && props.onClose()
          }}
        />
      </Stack>
    </>
  );
};

export default ResponsiblePersonDetail;