import React from 'react';
import { ArrowLeft } from '@wix/wix-ui-icons-common';
import { st, classes } from './ComposerHeader.st.css.js';
import TextButton from '../TextButton';
import Text from '../Text/Text';
import { dataHooks } from './constants';
class ComposerHeaderActions extends React.PureComponent {
    render() {
        return '';
    }
}
ComposerHeaderActions.displayName = 'Actions';
ComposerHeaderActions.defaultProps = {
    justifyContent: 'flex-start',
};
const ComposerHeaderMainActions = () => '';
const ComposerHeaderSaveStatus = ({ saveStatusValue, saveStatusError, dataHook, size, }) => (React.createElement(Text, { dataHook: dataHook || dataHooks.saveStatus, className: classes.saveStatus, secondary: true, light: true, size: size, skin: saveStatusError ? 'error' : 'standard', tagName: "span", weight: "thin" }, saveStatusValue));
ComposerHeaderMainActions.displayName = 'MainActions';
ComposerHeaderSaveStatus.displayName = 'SaveStatus';
const filterChildren = ({ children, displayName }) => {
    const actions = React.Children.map(children, child => child);
    return (actions &&
        actions.filter(child => React.isValidElement(child) && child.type.displayName === displayName));
};
const renderSingleAction = ({ props, index }) => {
    const { children, dataHook, ...rest } = props;
    return (children && (React.createElement("div", { key: index, "data-hook": dataHook, style: { ...rest, justifyContent: rest.justifyContent }, className: classes.actions }, children)));
};
const BackButton = React.memo(({ backButtonValue, onBackClick, size }) => {
    return backButtonValue ? (React.createElement(TextButton, { skin: "dark", prefixIcon: React.createElement(ArrowLeft, null), dataHook: dataHooks.backButton, className: classes.backButton, size: size, onClick: onBackClick }, backButtonValue)) : null;
});
const Actions = React.memo(({ children }) => {
    const actions = filterChildren({ children, displayName: 'Actions' });
    return actions ? (React.createElement("div", { className: classes.container }, actions.map(({ props }, index) => renderSingleAction({ props, index })))) : null;
});
const MainActions = React.memo(({ children }) => {
    const mainActions = filterChildren({ children, displayName: 'MainActions' });
    /**
     * We only support one type of main action.
     * It will be always the first one the in list.
     *  */
    const exists = mainActions && mainActions[0];
    return exists ? (React.createElement("div", { className: classes.mainActions, "data-hook": mainActions[0].props.dataHook || dataHooks.mainAction }, mainActions[0] && mainActions[0].props.children)) : null;
});
const shouldRenderDivider = ({ children, divider }) => {
    const actions = filterChildren({ children, displayName: 'Actions' });
    const sides = {
        left: {
            item: 0,
            justifyContent: 'flex-start',
        },
        right: {
            item: actions && actions.length - 1,
            justifyContent: 'flex-end',
        },
    };
    if (actions && actions.length === 1) {
        return actions[0].props.justifyContent === sides[divider].justifyContent;
    }
    if (actions && actions.length > 1) {
        return (actions[sides[divider].item].props.justifyContent ===
            sides[divider].justifyContent);
    }
    return null;
};
const LeftDivider = React.memo(({ backButton, children }) => {
    const shouldRender = backButton &&
        shouldRenderDivider({
            children,
            divider: 'left',
        });
    return shouldRender ? (React.createElement("div", { className: classes.divider, "data-hook": dataHooks.leftDivider })) : null;
});
const RightDivider = React.memo(({ children }) => {
    const mainActions = filterChildren({ children, displayName: 'MainActions' });
    const shouldRender = mainActions &&
        mainActions[0] &&
        shouldRenderDivider({
            children,
            divider: 'right',
        });
    return shouldRender ? (React.createElement("div", { className: classes.divider, "data-hook": dataHooks.rightDivider })) : null;
});
/** ComposerHeader */
const ComposerHeader = ({ children, dataHook, size = 'medium', dropShadow = false, backButtonValue, onBackClick, }) => {
    return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, { size, dropShadow }) },
        React.createElement(BackButton, { size: size, backButtonValue: backButtonValue, onBackClick: onBackClick }),
        React.createElement(LeftDivider, { backButton: backButtonValue, children: children }),
        React.createElement(Actions, null, children),
        React.createElement(RightDivider, { children: children }),
        React.createElement(MainActions, null, children)));
};
ComposerHeader.displayName = 'ComposerHeader';
ComposerHeader.Actions = ComposerHeaderActions;
ComposerHeader.MainActions = ComposerHeaderMainActions;
ComposerHeader.SaveStatus = ComposerHeaderSaveStatus;
export default ComposerHeader;
//# sourceMappingURL=ComposerHeader.js.map