import React, { useRef, useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core';
import { EntityHeaderContainer } from './ui/EntityHeaderContainer';
import { EntityHeaderList } from './ui/EntityHeaderList';
import { EntityHeaderListItem } from './ui/EntityHeaderListItem';
import { EntityHeaderStatList } from './ui/EntityHeaderStatList';
import { EntityHeaderStatListItem } from './ui/EntityHeaderStatListItem';
import { EntityHeaderSection } from './ui/EntityHeaderSection';
import { AlertPill } from './ui/AlertPill';
import { ChartIcon } from '@fluentui/react-icons';
import { useElementWidth } from './functions/useElementWidth';
import { IconRenderer } from '../../templates/ui/renderers/IconRenderer';
import { EntityHeaderFlags } from './ui/EntityHeaderFlags';
import PropTypes from 'prop-types';
import { UdpAlertsContainer } from '../../utilityDisplay/alerts/UdpAlertsContainer';
const useStyles = makeStyles((theme) => ({
    root: {}
}));
// https://univerus.atlassian.net/wiki/spaces/UDP/pages/2398257255/Entity+Header
export const EntityHeader = (props) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
    const { sectionProps, background, color, kpiProps, hiddenSections, chips, alerts, useUdpAlerts } = props;
    const classes = useStyles(props);
    const { section1, section2, section3, section4 } = sectionProps;
    const { kpi1, kpi2, kpi3, kpi4 } = kpiProps;
    const componentRef = useRef();
    const [compactSize, setCompactSize] = useState(true);
    const { isBreakpointUp } = useElementWidth(componentRef);
    useEffect(() => {
        if (isBreakpointUp('md')) {
            setCompactSize(false);
            // setDividedList(false);
        }
        else {
            setCompactSize(true);
            // setDividedList(true);
        }
    }, [isBreakpointUp]);
    return (React.createElement("div", { ref: componentRef }, !!compactSize && (React.createElement(EntityHeaderContainer, { direction: "row", showSeperator: true, background: background, color: color }, React.createElement(EntityHeaderSection, { flexGrow: true }, React.createElement(EntityHeaderList, null, !(section1 === null || section1 === void 0 ? void 0 : section1.hidden) &&
        ((_a = section1 === null || section1 === void 0 ? void 0 : section1.values) === null || _a === void 0 ? void 0 : _a.length) &&
        ((_b = section1.values) === null || _b === void 0 ? void 0 : _b.map((item) => (React.createElement(EntityHeaderListItem, { label: item === null || item === void 0 ? void 0 : item.label, value: item === null || item === void 0 ? void 0 : item.value, link: item === null || item === void 0 ? void 0 : item.link })))), !(section2 === null || section2 === void 0 ? void 0 : section2.hidden) &&
        ((_c = section2 === null || section2 === void 0 ? void 0 : section2.values) === null || _c === void 0 ? void 0 : _c.length) &&
        ((_d = section2.values) === null || _d === void 0 ? void 0 : _d.map((item) => (React.createElement(EntityHeaderListItem, { label: item === null || item === void 0 ? void 0 : item.label, value: item === null || item === void 0 ? void 0 : item.value, link: item === null || item === void 0 ? void 0 : item.link })))), !(section3 === null || section3 === void 0 ? void 0 : section3.hidden) &&
        ((_e = section3 === null || section3 === void 0 ? void 0 : section3.values) === null || _e === void 0 ? void 0 : _e.length) &&
        ((_f = section3.values) === null || _f === void 0 ? void 0 : _f.map((item) => (React.createElement(EntityHeaderListItem, { label: item === null || item === void 0 ? void 0 : item.label, value: item === null || item === void 0 ? void 0 : item.value, link: item === null || item === void 0 ? void 0 : item.link })))), !(section4 === null || section4 === void 0 ? void 0 : section4.hidden) &&
        ((_g = section4 === null || section4 === void 0 ? void 0 : section4.values) === null || _g === void 0 ? void 0 : _g.length) &&
        ((_h = section4.values) === null || _h === void 0 ? void 0 : _h.map((item) => (React.createElement(EntityHeaderListItem, { label: item === null || item === void 0 ? void 0 : item.label, value: item === null || item === void 0 ? void 0 : item.value, link: item === null || item === void 0 ? void 0 : item.link })))))))), React.createElement(EntityHeaderContainer, { direction: "row", showSeperator: true, background: background, color: color }, !compactSize && (React.createElement(React.Fragment, null, !(section1 === null || section1 === void 0 ? void 0 : section1.hidden) && (React.createElement(EntityHeaderSection, { flexGrow: true }, React.createElement(EntityHeaderList, null, !!((_j = section1 === null || section1 === void 0 ? void 0 : section1.values) === null || _j === void 0 ? void 0 : _j.length) &&
        section1.values.map((item) => (React.createElement(EntityHeaderListItem, { label: item === null || item === void 0 ? void 0 : item.label, value: item === null || item === void 0 ? void 0 : item.value, link: item === null || item === void 0 ? void 0 : item.link })))))), !(section2 === null || section2 === void 0 ? void 0 : section2.hidden) && (React.createElement(EntityHeaderSection, { flexGrow: true }, React.createElement(EntityHeaderList, null, !!((_k = section2 === null || section2 === void 0 ? void 0 : section2.values) === null || _k === void 0 ? void 0 : _k.length) &&
        section2.values.map((item) => (React.createElement(EntityHeaderListItem, { label: item === null || item === void 0 ? void 0 : item.label, value: item === null || item === void 0 ? void 0 : item.value, link: item === null || item === void 0 ? void 0 : item.link })))))), !(section3 === null || section3 === void 0 ? void 0 : section3.hidden) && (React.createElement(EntityHeaderSection, { flexGrow: true }, React.createElement(EntityHeaderList, null, !!((_l = section3 === null || section3 === void 0 ? void 0 : section3.values) === null || _l === void 0 ? void 0 : _l.length) &&
        section3.values.map((item) => (React.createElement(EntityHeaderListItem, { label: item === null || item === void 0 ? void 0 : item.label, value: item === null || item === void 0 ? void 0 : item.value, link: item === null || item === void 0 ? void 0 : item.link })))))), !(section4 === null || section4 === void 0 ? void 0 : section4.hidden) && (React.createElement(EntityHeaderSection, { flexGrow: true }, React.createElement(EntityHeaderList, null, !!((_m = section4 === null || section4 === void 0 ? void 0 : section4.values) === null || _m === void 0 ? void 0 : _m.length) &&
        section4.values.map((item) => (React.createElement(EntityHeaderListItem, { label: item === null || item === void 0 ? void 0 : item.label, value: item === null || item === void 0 ? void 0 : item.value, link: item === null || item === void 0 ? void 0 : item.link })))))))), !kpiProps.hidden && (React.createElement(EntityHeaderSection, { flexGrow: true }, React.createElement(EntityHeaderStatList, { flexGrow: true }, !(kpi1 === null || kpi1 === void 0 ? void 0 : kpi1.hidden) && (React.createElement(EntityHeaderStatListItem, { value: kpi1 === null || kpi1 === void 0 ? void 0 : kpi1.value, label: kpi1 === null || kpi1 === void 0 ? void 0 : kpi1.label, labelColor: kpi1 === null || kpi1 === void 0 ? void 0 : kpi1.labelColor, flexGrow: true, icon: React.createElement(IconRenderer, { noBorder: true, removeContainer: true, value: {
                color: { hex: '#' + (kpi1 === null || kpi1 === void 0 ? void 0 : kpi1.color) },
                name: (kpi1 === null || kpi1 === void 0 ? void 0 : kpi1.icon) || 'ChartIcon'
            } }) })), !(kpi2 === null || kpi2 === void 0 ? void 0 : kpi2.hidden) && (React.createElement(EntityHeaderStatListItem, { value: kpi2 === null || kpi2 === void 0 ? void 0 : kpi2.value, label: kpi2 === null || kpi2 === void 0 ? void 0 : kpi2.label, labelColor: kpi2 === null || kpi2 === void 0 ? void 0 : kpi2.labelColor, flexGrow: true, icon: React.createElement(IconRenderer, { noBorder: true, removeContainer: true, value: {
                color: { hex: '#' + (kpi2 === null || kpi2 === void 0 ? void 0 : kpi2.color) },
                name: (kpi2 === null || kpi2 === void 0 ? void 0 : kpi2.icon) || 'ChartIcon'
            } }) })), !(kpi3 === null || kpi3 === void 0 ? void 0 : kpi3.hidden) && (React.createElement(EntityHeaderStatListItem, { value: kpi3 === null || kpi3 === void 0 ? void 0 : kpi3.value, label: kpi3 === null || kpi3 === void 0 ? void 0 : kpi3.label, labelColor: kpi3 === null || kpi3 === void 0 ? void 0 : kpi3.labelColor, flexGrow: true, icon: React.createElement(IconRenderer, { noBorder: true, removeContainer: true, value: {
                color: { hex: '#' + (kpi3 === null || kpi3 === void 0 ? void 0 : kpi3.color) },
                name: (kpi3 === null || kpi3 === void 0 ? void 0 : kpi3.icon) || 'ChartIcon'
            } }) })), !(kpi4 === null || kpi4 === void 0 ? void 0 : kpi4.hidden) && (React.createElement(EntityHeaderStatListItem, { value: kpi4 === null || kpi4 === void 0 ? void 0 : kpi4.value, label: kpi4 === null || kpi4 === void 0 ? void 0 : kpi4.label, labelColor: kpi4 === null || kpi4 === void 0 ? void 0 : kpi4.labelColor, flexGrow: true, icon: React.createElement(IconRenderer, { noBorder: true, removeContainer: true, value: {
                color: { hex: '#' + (kpi4 === null || kpi4 === void 0 ? void 0 : kpi4.color) },
                name: (kpi4 === null || kpi4 === void 0 ? void 0 : kpi4.icon) || 'ChartIcon'
            } }) })))))), (!hiddenSections.chips || !hiddenSections.alert) && (React.createElement(EntityHeaderContainer, { className: classes.root, background: background, color: color }, !hiddenSections.chips && (React.createElement(EntityHeaderSection, { flexGrow: true, alignItems: 'center' }, React.createElement(EntityHeaderFlags, { data: chips === null || chips === void 0 ? void 0 : chips.map((chip) => ({ label: chip })) }))), React.createElement(EntityHeaderSection, { flexGrow: true }), !hiddenSections.alert && (React.createElement(EntityHeaderSection, null, useUdpAlerts ? (React.createElement(UdpAlertsContainer, null)) : (React.createElement(AlertPill, { errorCount: alerts === null || alerts === void 0 ? void 0 : alerts.error, warningCount: alerts === null || alerts === void 0 ? void 0 : alerts.warning }))))))));
};
EntityHeader.propTypes = {
    sectionProps: PropTypes.shape({
        section1: PropTypes.shape({
            hidden: PropTypes.bool,
            values: PropTypes.arrayOf(PropTypes.shape({
                label: PropTypes.string,
                value: PropTypes.string
            }))
        }),
        section2: PropTypes.shape({
            hidden: PropTypes.bool,
            values: PropTypes.arrayOf(PropTypes.shape({
                label: PropTypes.string,
                value: PropTypes.string
            }))
        }),
        section3: PropTypes.shape({
            hidden: PropTypes.bool,
            values: PropTypes.arrayOf(PropTypes.shape({
                label: PropTypes.string,
                value: PropTypes.string
            }))
        })
    }).isRequired,
    background: PropTypes.string,
    color: PropTypes.string,
    kpiProps: PropTypes.shape({
        hidden: PropTypes.bool,
        kpi1: PropTypes.shape({
            label: PropTypes.string,
            value: PropTypes.string,
            color: PropTypes.string,
            icon: PropTypes.string,
            hidden: PropTypes.bool
        }),
        kpi2: PropTypes.shape({
            label: PropTypes.string,
            value: PropTypes.string,
            color: PropTypes.string,
            icon: PropTypes.string,
            hidden: PropTypes.bool
        }),
        kpi3: PropTypes.shape({
            label: PropTypes.string,
            value: PropTypes.string,
            color: PropTypes.string,
            icon: PropTypes.string,
            hidden: PropTypes.bool
        }),
        kpi4: PropTypes.shape({
            label: PropTypes.string,
            value: PropTypes.string,
            color: PropTypes.string,
            icon: PropTypes.string,
            hidden: PropTypes.bool
        })
    }).isRequired,
    hiddenSections: PropTypes.shape({
        alert: PropTypes.bool,
        chips: PropTypes.bool
    }),
    chips: PropTypes.arrayOf(PropTypes.string),
    alerts: PropTypes.shape({
        warning: PropTypes.number,
        error: PropTypes.number
    })
};
//# sourceMappingURL=EntityHeader.js.map