import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import withListener from '../../../withListener';

import { headerAuxBarDefaultSettings, headerAuxBarSchemaForm } from '../../../../constants/components/schemas/header';
import { headerAuxBarSettingsShape, headerAuxBarDataShape } from '../../../../constants/components/prop-types/header';
import { menusPropTypes } from '../../../../constants/components/prop-types/menu';
import { darken } from '../../../../tools/colorHelper';

import Link from '../../../../atoms/link/Link';
import LanguageSwitcher from '../../../../atoms/language-switcher/LanguageSwitcher';
import { useResponsive } from '../../../../tools/widths/useResponsive';
import { MENUS } from '../../../../constants/menus';
import { getPropValue } from '../../../../tools/objectTools';
import MenuDropdown from '../../../../atoms/menu-dropdown/menuDropdown';
import './styles/HeaderAuxiliaryBar.scss';

const n = createNamespace('HeaderAuxiliaryBar');

const HeaderAuxiliaryBar = ({
    data: {
        locale,
        i18n,
        pageId
    },
    settings,
    menus
}) => {
    const settingsWithDefaults = {
        ...HeaderAuxiliaryBar.defaultProps.settings,
        ...settings
    };

    const {
        auxBarHeight,
        auxBarBackgroundColor,
        auxBarTextColor,
        auxBarTextColorHover,
        auxBarBorderColor,
        auxBarTextSize,
        auxBarTextAlignment,
        displayLanguageSwitcher,
        auxBarLinkSpacing
    } = settingsWithDefaults;
    const { mediumDown: isMobile } = useResponsive();
    const styleVariables = {
        height: auxBarHeight && `${auxBarHeight}px`,
        'background-color': auxBarBackgroundColor,
        'border-color': auxBarBorderColor,
        'text-color': auxBarTextColor,
        'text-color-hover': auxBarTextColorHover,
        'item-spacing': auxBarLinkSpacing && `${auxBarLinkSpacing / 2}px`,
        'lang-dropdown-bg-color': auxBarBackgroundColor && darken(auxBarBackgroundColor, 0.1)
    };
    const modifiers = [
        auxBarTextSize && `${auxBarTextSize}-text`,
        auxBarTextAlignment
    ];

    const hasMenu = menus && menus[MENUS.AUXILIARY_BAR_MENU] && menus[MENUS.AUXILIARY_BAR_MENU].menu;
    const links = hasMenu && menus[MENUS.AUXILIARY_BAR_MENU].menu.map(menuItem => {
        const { isVisible, openInNewTab, children, uuid } = menuItem;
        const titleText = getPropValue(menuItem, 'title.value');
        const linkUrl = getPropValue(menuItem, 'link.value');

        if (!isVisible || !titleText) {
            return null;
        }
        const hasChildren = children && children.length > 0;
        const target = openInNewTab ? '_blank' : null;
        const showMenuDropDown = items => {
            const visibleChildItems = items && items.filter(item => item.isVisible);
            return items && visibleChildItems.length > 0;
        };

        return (
            <li {...n('item').withTestId('linksItem').props} key={uuid}>
                {hasChildren && showMenuDropDown(children) ? (
                    <li {...n('auxBarNavItem', 'user-dropdown').withTestId('userDropdown').props}>
                        <Link
                            href={linkUrl || false}
                            {...n('link').props}
                            target={target}
                        >
                            {titleText}
                        </Link>
                        <MenuDropdown
                            items={children}
                        />
                    </li>
                ) : (
                    <Link
                        href={linkUrl || false}
                        {...n('link').props}
                        target={target}
                    >
                        {titleText}
                    </Link>
                )}
            </li>
        );
    });

    return (
        !isMobile && (
            <div
                {...n('auxBar').withTestId().props}
                aria-label={i18n.auxNavigation}
                role="navigation"
            >
                <ul {...n('wrapper', modifiers).withVariables(styleVariables).props}>
                    {links}
                    {displayLanguageSwitcher
                        && (
                            <li {...n('item').withTestId('linksItem').props} key="languageSwitcher">
                                <LanguageSwitcher
                                    {...n('languagesSwitcher', auxBarTextSize).props}
                                    {...locale}
                                    i18n={i18n}
                                    pageId={pageId}
                                />
                            </li>
                        )}
                </ul>
            </div>
        )
    );
};

HeaderAuxiliaryBar.defaultProps = {
    data: {
        locale: {
            current: undefined,
            code: undefined,
            available: []
        },
        i18n: {
            auxNavigation: 'Auxiliary Navigation'
        }
    },
    settings: headerAuxBarDefaultSettings,
    menus: menusPropTypes
};

HeaderAuxiliaryBar.schema = () => ({
    name: 'Header Auxiliary Bar',
    title: 'uieditor.sfbComponent.header.auxiliaryBar.title',
    iconName: 'ellipsis',
    form: headerAuxBarSchemaForm
});

HeaderAuxiliaryBar.propTypes = {
    settings: PropTypes.shape(headerAuxBarSettingsShape),
    data: PropTypes.shape(headerAuxBarDataShape),
    menus: menusPropTypes
};

export default withListener(HeaderAuxiliaryBar);
