/**
 * empty comment line Sergey Shishigin
 *
 * @author: Sergey Shishigin
 * @date: 2019-04-23
 */

import * as React from 'react';
import {Layout} from 'antd';
import {Helmet} from 'react-helmet';
import {Divider, Icon, PLACEMENT, SIZE, Tooltip} from '../..';
import {IconName} from '@unidata/icon';

import * as styles from './pageHeader.m.css';

type BaseHeaderProps = {
    groupSectionTitle: string;
    sectionTitle: React.ReactNode;
    sectionTitleTooltip?: string;
    sectionSubTitle?: React.ReactNode;
    itemTitle?: React.ReactNode;
    afterTitleContent?: React.ReactNode;
    horizontalMenu?: JSX.Element;
    iconType?: IconName;
    pageTitle?: string;
}

export type IHeaderProps = BaseHeaderProps & ({
    extraButtons?: JSX.Element;
} | {
    controls?: React.ReactNode[];
});

export class PageHeader extends React.Component<IHeaderProps> {

    get className () {
        const {horizontalMenu} = this.props;

        let classes: string[] = [styles.pageHeader];

        if (horizontalMenu) {
            classes.push(styles.withHorizontalMenu);
        }

        return classes.join(' ');
    }

    override render () {

        const {groupSectionTitle,
            sectionTitle,
            sectionTitleTooltip,
            itemTitle,
            afterTitleContent,
            iconType,
            horizontalMenu,
            sectionSubTitle,
            pageTitle
        } = this.props;

        const controls = 'controls' in this.props && this.props.controls;
        const extraButtons = 'extraButtons' in this.props && this.props.extraButtons;

        return (
            <Layout.Header className={this.className}>
                {pageTitle !== undefined && (
                    <Helmet title={pageTitle}/>
                )}
                <div className={styles.rowTitle}>
                    <div className={styles.titleBlock}>
                        {iconType !== undefined && (
                            <div className={styles.iconContainer}>
                                <Icon name={iconType} size={SIZE.EXTRA_LARGE}/>
                            </div>
                        )}
                        <div className={styles.titleContainer}>
                            <div className={styles.groupTitle}>{groupSectionTitle}</div>
                            <div className={styles.sectionContainer}>
                                <div className={styles.primaryTitle}>
                                    <Tooltip overlay={sectionTitleTooltip || sectionTitle} placement={PLACEMENT.TOP}>
                                        <span>{sectionTitle}</span>
                                    </Tooltip>
                                </div>
                                {sectionSubTitle && (
                                    <span className={styles.sectionSubTitle}>
                                        {typeof sectionSubTitle === 'string' ? (
                                            <Tooltip overlay={sectionSubTitle} placement={PLACEMENT.TOP}>
                                                <span>{sectionSubTitle}</span>
                                            </Tooltip>
                                        ) : sectionSubTitle}
                                    </span>
                                )}
                                {itemTitle && (
                                    <>
                                        <span className='ud-page-header-item-title'>&nbsp;/&nbsp;</span>
                                        <span className={styles.secondaryTitle}>
                                            <Tooltip overlay={itemTitle} placement={PLACEMENT.TOP}>
                                                <span>{itemTitle}</span>
                                            </Tooltip>
                                        </span>
                                    </>
                                )}
                                <div className={styles.afterTitleContentContainer}>
                                    {afterTitleContent}
                                </div>
                            </div>
                        </div>
                    </div>

                    {controls !== false && controls !== undefined && (
                        <div className={styles.controlsContainer}>
                            {controls.map((control, index) => {
                                return (
                                    <React.Fragment key={index}>
                                        {index > 0 && (
                                            <Divider orientation={'vertical'} offset={5}/>
                                        )}
                                        {control}
                                    </React.Fragment>
                                );
                            })}
                        </div>
                    )}

                    {extraButtons !== false && extraButtons !== undefined && (
                        <div className={styles.buttonsContainer}>
                            {extraButtons}
                        </div>
                    )}
                </div>
                {/* TODO: it is not clear how to make responsive design for a variable set of buttons */}
                {/* TODO: tab buttons are not implemented yet, as in the layout */}
                {horizontalMenu && (
                <div className={styles.horizontalContainer}>
                    {horizontalMenu}
                </div>
              )}
            </Layout.Header>
        );
    }
}