import { Box, Divider, SxProps, Typography } from '@mui/material'
import { Variant } from '@mui/material/styles/createTypography'
import _ from 'lodash'
import { PermissionsStore } from '../shared-state'
import { InstitutionsStore } from '../shared-state/InstitutionsStore'

export interface ReportHeaderTypographyProps {
  text: string
  sx?: SxProps
  variant?: Variant
  hide?: boolean
}

export interface ReportHeaderOptionalTypographyProps {
  text?: string
  sx?: SxProps
  variant?: Variant
  hide?: boolean
}

export enum ReportHeaderType {
  FULL_HEADER = 'full-header',
  LOGO_HEADER = 'logo-header',
}

ReportHeader.defaultProps = {
  headerType: ReportHeaderType.FULL_HEADER,
  address: {
    hide: false,
    variant: 'body1',
  },
  phone: {
    hide: false,
    variant: 'body1',
  },
  recognitionDetails: {
    hide: false,
    variant: 'h5',
  },
}

export interface ReportHeaderProps {
  containerSx?: SxProps
  headerType?: ReportHeaderType
  reportHeaderImageUrl?: string
  reportHeaderImageCSS?: any
  logoImageUrl?: string
  logoImageCSS?: any
  recognitionDetails?: ReportHeaderOptionalTypographyProps
  address?: ReportHeaderOptionalTypographyProps
  phone?: ReportHeaderOptionalTypographyProps
  showDivider?: boolean
  dividerSx?: SxProps
  typographyList?: ReportHeaderTypographyProps[]
}

export default function ReportHeader({
  containerSx,
  headerType,
  reportHeaderImageUrl,
  reportHeaderImageCSS,
  logoImageUrl,
  logoImageCSS,
  address: {
    hide: hideAddress,
    variant: addressVariant,
    text: addressText,
    sx: addressSx,
  },
  recognitionDetails: {
    hide: hideRecognitionDetails,
    variant: recognitionDetailsVariant,
    text: recognitionDetailsText,
    sx: recognitionDetailsSx,
  },
  phone: {
    hide: hidePhone,
    variant: phoneVariant,
    text: phoneText,
    sx: phoneSx,
  },
  showDivider = false,
  dividerSx,
  typographyList,
}: ReportHeaderProps) {
  const { masterInstitutionUniqueId, institutionType } =
    PermissionsStore.useState((s) => ({
      institutionType: s.institutionType,
      masterInstitutionUniqueId: s.masterInstitutionUniqueId,
    }))
  const { current, institutions } = InstitutionsStore.useState((s) => s)
  const institutionsMap = _.keyBy(institutions, (institution) => institution.id)

  const masterInstitution = institutionsMap[masterInstitutionUniqueId]

  const hasFullHeader = current?.reportHeader?.url ? true : false

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '5px',
        marginBottom: '15px',
        ...containerSx,
      }}
    >
      {hasFullHeader && headerType === ReportHeaderType.FULL_HEADER ? (
        <>
          <img
            style={{
              objectFit: 'contain',
              width: '100%',
              height: '100px',
              ...reportHeaderImageCSS,
            }}
            src={
              reportHeaderImageUrl ||
              current?.reportHeader?.url ||
              masterInstitution?.reportHeader?.url
            }
          />
        </>
      ) : (
        <>
          <img
            style={{
              height: '40px',
              objectFit: 'contain',
              ...logoImageCSS,
            }}
            src={
              logoImageUrl ||
              current?.image?.url ||
              masterInstitution?.image?.url
            }
          />
          {!hideRecognitionDetails && (
            <Typography
              variant={recognitionDetailsVariant}
              sx={recognitionDetailsSx}
            >
              {recognitionDetailsText ||
                current?.recognitionDetails ||
                masterInstitution?.recognitionDetails ||
                ''}
            </Typography>
          )}
          {!hideAddress && (
            <Typography variant={addressVariant} sx={addressSx}>
              {addressText ||
                current?.address ||
                masterInstitution?.address ||
                ''}
            </Typography>
          )}
          {!hidePhone && (
            <Typography variant={phoneVariant} sx={phoneSx}>
              {'Phone: ' +
                (phoneText || current?.phone || masterInstitution?.phone)}
            </Typography>
          )}
        </>
      )}

      {showDivider && (
        <Divider
          flexItem
          variant="middle"
          sx={{ m: '15px', borderColor: '#000000', ...dividerSx }}
        />
      )}
      {typographyList &&
        typographyList.map((s, index) => (
          <Typography key={index} variant={s.variant || 'body1'} sx={s.sx}>
            {s.text}
          </Typography>
        ))}
    </Box>
  )
}
