import { useMemo } from 'react';
import cx from "../../../../utils/css/cx.js";
import ModuleEyebrow from "../../ModuleEyebrow/index.js";
import ModuleHeadline from "../../ModuleHeadline/index.js";
import ContestName from "../../ContestName/index.jsx";
import AutoLayout from "../../../layout/AutoLayout/index.js";
import ContestType from "../../ContestType/index.js";
import ModuleLastUpdated from "../../ModuleLastUpdated/index.js";
import ContestInfoTag from "../../ContestInfoTag/index.js";
import useContainerBreakpointIsAtLeast from "../../../../hooks/breakpoint/useContainerBreakpointIsAtLeast/index.js";
import { useContestStatus } from "../../../../hooks/election/index.js";
import { useBreakpointIsAtLeast } from "../../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const SCRHeader = function SCRHeader(props) {
  const {
    eyebrow,
    headline,
    selectedContestId
  } = props;
  const isAtLeastXxl = useContainerBreakpointIsAtLeast('xxl');
  const isAtLeastXl = useContainerBreakpointIsAtLeast('xl');
  const isAtLeastLg = useContainerBreakpointIsAtLeast('lg');
  const isAtLeastMd = useContainerBreakpointIsAtLeast('md');
  const bpIsAtLeastSm = useBreakpointIsAtLeast('sm');
  const contestStatus = useContestStatus(selectedContestId);
  const {
    outcomeBalanceType
  } = contestStatus;
  const [layoutDirection, layoutAlign, layoutGap, tagContainerClasses = []] = useMemo(() => {
    const isFlip = outcomeBalanceType === 'flip';
    if (isFlip) {
      return ['horizontal', 'left', 'space-between', ['is-flip', isAtLeastMd ? undefined : 'compact']];
    }
    if (isAtLeastLg) {
      return ['horizontal', 'bottomCenter', 'space-between'];
    }
    return ['vertical', 'left', '1'];
  }, [isAtLeastLg, isAtLeastMd, outcomeBalanceType]);
  const tagSize = useMemo(() => {
    // Mimics/aligns with the headline changing size as
    // defined by ModuleHeadline
    if (bpIsAtLeastSm) {
      if (isAtLeastXxl) {
        return '500';
      }
      if (isAtLeastXl) {
        return '400';
      }
      if (isAtLeastMd) {
        return '300';
      }
    }
    return '200';
  }, [bpIsAtLeastSm, isAtLeastXxl, isAtLeastXl, isAtLeastMd]);
  return <AutoLayout gap="2">
      <ModuleLastUpdated />
      <ModuleEyebrow isLive {...eyebrow} />

      <AutoLayout gap={layoutGap} direction={layoutDirection} align={layoutAlign}>
        <ModuleHeadline>
          {headline || <>
              <ContestName id={selectedContestId} format="medium" />
              <span className={cls('contest-type')}>
                {' '}
                <ContestType id={selectedContestId} format="party-only" />
              </span>
            </>}
        </ModuleHeadline>

        <div className={cls(...tagContainerClasses)}>
          <div>
            <ContestInfoTag size={tagSize} contestId={selectedContestId} />
          </div>
        </div>
      </AutoLayout>
    </AutoLayout>;
};
SCRHeader.defaultProps = {
  eyebrow: {}
};
export default SCRHeader;