Untitled

import { ArrowBack, Edit, ExpandMore } from '@mui/icons-material'
import { AccordionDetails } 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} sx={{ width: "100%", 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} >
                <Stack py={1} px={2} width="100%">
                    <Typography variant='h6'>Verantwoordelijke persoon</Typography>
                </Stack>
                <Divider />
                <Stack p={1} width="100%" direction="row" justifyContent="space-between">
                    <Stack width="100%" justifyContent="space-between" p={1} borderRight="1px dashed" borderColor={grey[200]} >
                        <Stack width="100%" direction="row" justifyContent="space-between">
                            <Typography variant='subtitle2'>Algemeen</Typography>
                        </Stack>
                        <Stack pt={2}>
                            <Stack width="100%" direction="row" justifyContent="space-between">
                                <Stack width="50%">
                                    <Typography variant='caption' color={grey[600]}>
                                        Nazorg
                                    </Typography>
                                </Stack>
                                <Stack width="50%" direction="row" justifyContent="space-between">
                                    <Typography variant='caption'>
                                        xyz
                                    </Typography>
                                    <Edit onClick={(e) => setAnchorEl(e.currentTarget)}
                                        sx={{ fontSize: "medium", color: grey[600] }} />
                                </Stack>
                            </Stack>
                            <Stack width="100%" direction="row" justifyContent="space-between">
                                <Stack width="50%">
                                    <Typography variant='caption' color={grey[600]}>
                                        Sitebeheerder
                                    </Typography>
                                </Stack>
                                <Stack width="50%" direction="row" justifyContent="space-between">
                                    <Typography variant='caption'>
                                        xyz
                                    </Typography>
                                    <Edit onClick={(e) => setAnchorEl(e.currentTarget)}
                                        sx={{ fontSize: "medium", color: grey[600] }} />
                                </Stack>
                            </Stack>
                        </Stack>
                    </Stack>


                    <Stack direction="row" width="100%" justifyContent="space-between" >

                    </Stack>
                    <Stack direction="row" width="100%" justifyContent="space-between" >
                    </Stack>
                </Stack>
            </Paper>

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


                        <Stack direction="row" width="100%" justifyContent="space-between" >

                        </Stack>
                        <Stack direction="row" width="100%" justifyContent="space-between" >
                        </Stack>
                    </Stack>
                </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