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 ModuleDescription from "../../ModuleDescription/index.js";
import ContestElectoralVotes from "../../ContestElectoralVotes/index.js";
import ContestDescription from "../../ContestDescription/index.jsx";
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 isAtLeastMd = useContainerBreakpointIsAtLeast('md');
  const isAtLeastSm = useContainerBreakpointIsAtLeast('sm');
  const bpIsAtLeastSm = useBreakpointIsAtLeast('sm');
  const contestStatus = useContestStatus(selectedContestId);
  const {
    outcomeBalanceType
  } = contestStatus;
  const isFlip = outcomeBalanceType === 'flip';
  const [layoutDirection, layoutAlign, layoutGap] = useMemo(() => {
    if (isAtLeastSm) {
      return ['horizontal', 'bottomRight', 'space-between'];
    }
    return ['vertical', 'left', '1'];
  }, [isAtLeastSm]);
  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}>
        <AutoLayout gap={0} direction="vertical">
          <ModuleHeadline>
            {headline || <>
              <ContestName id={selectedContestId} format="medium" />
              <span className={cls('contest-type')}>
                {' '}
                <ContestType id={selectedContestId} format="party-only" />
              </span>
            </>}
          </ModuleHeadline>

          <ModuleDescription>
            <ContestElectoralVotes id={selectedContestId} format="long" />
            {' '}
            <ContestDescription id={selectedContestId} />
          </ModuleDescription>
        </AutoLayout>

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