import { LoadingButton } from '@mui/lab';
import { Box, Divider, Grid, Typography } from '@mui/material';
import { format } from 'date-fns';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import showIcon from '../../../assets/images/icon/Show.svg';
import { CLINIC_STATUS, NOT_AVAILABLE_TEXT } from '../../../constants';
import { profile } from '../../Login/loginAction';
import { setClinicId } from '../store/logInAsClinicAdminAction';
import { useStyles } from './styles/generalInformationStyles';

const GeneralInformation = ({ clinicData, clinicAdminData }) => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const classes = useStyles();

  const handleViewCompanyDashboard = async () => {
    dispatch(setClinicId({ companyId: clinicData?.id }));
    await dispatch(profile());
    navigate('/');
  };

  return (
    <Box className={classes.generalInfoBox}>
      {/* ..................general info label............... */}
      <Grid container>
        <Grid item xs={6}>
          <Typography className={classes.generalInfoLabel}>
            GENERAL INFORMATION
          </Typography>
        </Grid>
        <Grid item xs={3}>
          <Typography className={classes.generalInfoUploaded}>
            Uploaded:{' '}
            {clinicData?.update_time
              ? format(new Date(clinicData?.update_time), 'dd MMM yyyy')
              : ''}
          </Typography>
        </Grid>
        <Grid item xs={3}>
          {clinicData?.status === CLINIC_STATUS.APPROVED && (
            <LoadingButton
              variant="contained"
              display={false}
              className={classes.viewCompanyDashboardButton}
              startIcon={<img src={showIcon} className={classes.showIcon} />}
              onClick={handleViewCompanyDashboard}
            >
              View Clinics Dashboard
            </LoadingButton>
          )}
        </Grid>
      </Grid>
      {/* .................company Name grid................. */}
      <Grid className={classes.companyNameGrid}>
        <Grid item xs={12}>
          <Typography className={classes.companyNameLabel}>
            {clinicData?.name}
          </Typography>
        </Grid>
        <Grid xs={12} className={classes.companyNameSubTitleGrid}>
          <div>
            <Typography className={classes.companyNameSubTitleLabel}>
              Raised On:{' '}
              {clinicData?.update_time
                ? format(new Date(clinicData?.update_time), 'dd MMM yyyy')
                : NOT_AVAILABLE_TEXT}
            </Typography>
          </div>
          <Divider
            className={classes.dividerClass}
            orientation="vertical"
            flexItem
          />
          <div>
            <Typography className={classes.companyNameSubTitleLabel}>
              {clinicData?.email}
            </Typography>
          </div>
        </Grid>
      </Grid>
      {/* ..................comapny user details grid.............................. */}
      <Box className={classes.companyUserDetails}>
        <Box>
          <Typography className={classes.companyUserDetailsTitle}>
            {clinicAdminData?.name}
          </Typography>
          <Typography className={classes.companyUserDetailsSubTitle}>
            User Name
          </Typography>
        </Box>
        <Box>
          <Typography className={classes.companyUserDetailsTitle}>
            {clinicAdminData?.designation
              ? clinicAdminData?.designation?.toUpperCase()?.replace(/_/g, ' ')
              : NOT_AVAILABLE_TEXT}
          </Typography>
          <Typography className={classes.companyUserDetailsSubTitle}>
            User Designation
          </Typography>
        </Box>
        <Box>
          <Typography className={classes.companyUserDetailsTitle}>
            {clinicAdminData?.phone
              ? `${clinicAdminData.phone}`
              : NOT_AVAILABLE_TEXT}
          </Typography>
          <Typography className={classes.companyUserDetailsSubTitle}>
            Contact Number
          </Typography>
        </Box>
        <Box>
          <Typography className={classes.companyUserDetailsTitle}>
            {clinicData?.postal_code ? clinicData?.postal_code : NOT_AVAILABLE_TEXT}
          </Typography>
          <Typography className={classes.companyUserDetailsSubTitle}>
            Pincode
          </Typography>
        </Box>
      </Box>

      {/* ......................company address grid................ */}
      <Grid container className={classes.companyDetailsAddressGrid}>
        <Grid item xs={12}>
          <Typography className={classes.companyUserDetailsTitle}>
            {clinicData?.address ? clinicData?.address : NOT_AVAILABLE_TEXT}
          </Typography>
          <Typography className={classes.companyUserDetailsSubTitle}>
            Full Address
          </Typography>
        </Grid>
      </Grid>
    </Box>
  );
};

export default GeneralInformation;
