import PropTypes from 'prop-types';
import { NAVIGATION_TEXT_SIZE, NAVIGATION_TEXT_ALIGN, LOGO_TARGET_TYPES, SEARCH_BAR_LOCATIONS, SEARCH_BAR_HEIGHTS } from '../header';
import { configShape, userShape, marketplaceNamePropTypes, localeShape } from '../../prop-types/config';
import { imageUploaderShape } from '../../schema/prop-types/image-uploader';
import { commonShape, searchBarShape, metaShape } from '../../prop-types/common';
import { i18nShape } from '../../prop-types/i18n';
import { LOGO_OPTIONS } from '../../logo';

// Common
const headerLinkShape = {
    label: PropTypes.string,
    url: PropTypes.string
};

const headerNavigationItemShape = {
    title: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({
        ...headerLinkShape,
        items: PropTypes.arrayOf(PropTypes.shape(headerLinkShape))
    }))
};

export const categoryShape = {
    id: PropTypes.number,
    name: PropTypes.string,
    href: PropTypes.string,
    subCategories: PropTypes.arrayOf(PropTypes.shape(this))
};

// Header Cart
const cartItemShape = {
    name: PropTypes.string,
    overview: PropTypes.string,
    iconUrl: PropTypes.string,
    iconSrcset: PropTypes.shape({
        default: PropTypes.string,
        '1x': PropTypes.string,
        '2x': PropTypes.string
    })
};

export const cartShape = {
    items: PropTypes.arrayOf(PropTypes.shape(cartItemShape))
};

// Header Home Bar
export const headerHomeBarSettingsShape = {
    logoTheme: PropTypes.oneOf(LOGO_OPTIONS),
    logoHeight: PropTypes.number,
    homeBarPadding: PropTypes.number,
    displayCart: PropTypes.bool,
    displayLoginLink: PropTypes.bool,
    displayRegistrationLink: PropTypes.bool,
    customCartIcon: PropTypes.shape({
        filename: PropTypes.string,
        type: PropTypes.string,
        url: PropTypes.string
    }),
    customSignInIcon: PropTypes.shape({
        filename: PropTypes.string,
        type: PropTypes.string,
        url: PropTypes.string
    }),
    homeBarTextSize: PropTypes.oneOf(NAVIGATION_TEXT_SIZE.map(({ value }) => value)),
    homeBarTextColor: PropTypes.string,
    homeBarTextHoverColor: PropTypes.string,
    homeBarTextActiveColor: PropTypes.string,
    homeBarTextAlignment: PropTypes.string,
    homeBarBorderColor: PropTypes.string,
    homeBarBackgroundColor: PropTypes.string,
    logoTargetType: PropTypes.oneOf(LOGO_TARGET_TYPES.map(e => e.value)),
    logoTargetCustomUrl: PropTypes.string,
    homeBarMenuItems: PropTypes.arrayOf(PropTypes.shape(headerNavigationItemShape))
};

export const headerHomeBarDataShape = {
    logo: PropTypes.string,
    user: PropTypes.shape(userShape),
    marketplaceName: marketplaceNamePropTypes,
    searchBar: PropTypes.shape(searchBarShape),
    displaySearchBar: PropTypes.bool,
    categories: PropTypes.arrayOf(PropTypes.shape(categoryShape)),
    listingEndpoint: PropTypes.string,
    baseUrl: PropTypes.string,
    toggleHeaderScrimFunction: PropTypes.func,
    i18n: PropTypes.shape(i18nShape),
    locale: PropTypes.shape(localeShape),
    nav: PropTypes.object,
    config: PropTypes.shape(configShape)
};

// Header Navigation Bar
export const headerNavigationBarSettingsShape = {
    navBarMenuItems: PropTypes.arrayOf(PropTypes.shape(headerNavigationItemShape)),
    navBarBarHeight: PropTypes.number,
    navBarTextAlignment: PropTypes.oneOf(NAVIGATION_TEXT_ALIGN.map(({ value }) => value)),
    navBarTextSize: PropTypes.oneOf(NAVIGATION_TEXT_SIZE.map(({ value }) => value)),
    navBarLinkSpacing: PropTypes.number,
    navBarTextColor: PropTypes.string,
    navBarTextHoverColor: PropTypes.string,
    navBarBorderColor: PropTypes.string,
    navBarBackgroundColor: PropTypes.string
};

export const headerNavigationBarDataShape = {
    searchBar: PropTypes.shape(searchBarShape),
    displaySearchBar: PropTypes.bool,
    categories: PropTypes.arrayOf(PropTypes.shape(categoryShape)),
    config: PropTypes.shape(configShape)
};

// Auxiliary Bar
export const headerAuxBarSettingsShape = {
    auxBarHeight: PropTypes.number,
    auxBarTextAlignment: PropTypes.oneOf(NAVIGATION_TEXT_ALIGN.map(v => v.value)),
    auxBarLinkSpacing: PropTypes.number,
    displayLanguageSwitcher: PropTypes.bool,
    auxBarTextSize: PropTypes.oneOf(NAVIGATION_TEXT_SIZE.map(v => v.value)),
    auxBarTextColor: PropTypes.string,
    auxBarTextColorHover: PropTypes.string,
    auxBarBorderColor: PropTypes.string,
    auxBarBackgroundColor: PropTypes.string,
    auxBarMenuItems: PropTypes.arrayOf(PropTypes.shape(headerLinkShape))
};

export const headerAuxBarDataShape = {
    locale: PropTypes.shape(localeShape)
};

// Categories menu
export const headerCategoriesMenuSettingsShape = {
    catMenuTextSize: PropTypes.oneOf(NAVIGATION_TEXT_SIZE.map(({ value }) => value)),
    catMenuRowSpacing: PropTypes.number,
    catMenuTitleColor: PropTypes.string,
    catMenuTextColor: PropTypes.string,
    catMenuTextHoverColor: PropTypes.string,
    catMenuTextActiveColor: PropTypes.string,
    catMenuBackgroundColor: PropTypes.string,
    catMenuBgColorHover: PropTypes.string,
    catMenuBgColorActive: PropTypes.string
};

// Header Search Bar
const headerSearchBarSettingsShape = {
    label: PropTypes.string,
    placeholder: PropTypes.string,
    maxWidth: PropTypes.number,
    borderVisible: PropTypes.bool,
    cornerRadius: PropTypes.number,
    backgroundColor: PropTypes.string,
    borderColor: PropTypes.string,
    searchIcon: PropTypes.shape(imageUploaderShape),
    searchIconColor: PropTypes.string,
    searchButtonColor: PropTypes.string,
    searchBarHeight: PropTypes.oneOf(SEARCH_BAR_HEIGHTS.map(({ value }) => value))
};

export const headerSearchBarPropTypes = {
    ...headerSearchBarSettingsShape,
    ...{
        i18n: PropTypes.shape({
            submit: PropTypes.string
        })
    }
};

export const headerSearchBarDataShape = {
    config: PropTypes.shape(configShape)
};

// Announcement bar
export const headerAnnouncementBarSettingsShape = {
    announcementBarMessage: PropTypes.string,
    announcementBarLink: PropTypes.string,
    announcementBarOpenInNewTab: PropTypes.bool,
    announcementBarHeight: PropTypes.number,
    announcementBarTextAlignment: PropTypes.oneOf(NAVIGATION_TEXT_ALIGN.map(({ value }) => value)),
    announcementBarTextSize: PropTypes.oneOf(NAVIGATION_TEXT_SIZE.map(({ value }) => value)),
    announcementBarTextColor: PropTypes.string,
    announcementBarLinkTextColor: PropTypes.string,
    announcementBarBorderColor: PropTypes.string,
    announcementBarBackgroundColor: PropTypes.string
};

// Main Header
export const headerDataShape = {
    meta: PropTypes.shape(metaShape),
    common: PropTypes.shape(commonShape),
    config: PropTypes.shape(configShape),
    i18n: PropTypes.shape(i18nShape),
    nav: PropTypes.shape({
        primary: PropTypes.shape({
            categories: PropTypes.arrayOf(PropTypes.shape(categoryShape))
        })
    })
};

export const headerSettingsShape = {
    ...headerHomeBarSettingsShape,
    ...headerNavigationBarSettingsShape,
    ...headerAnnouncementBarSettingsShape,
    ...headerAuxBarSettingsShape,
    ...headerCategoriesMenuSettingsShape,
    ...headerSearchBarSettingsShape,
    searchBarLocation: PropTypes.oneOf(SEARCH_BAR_LOCATIONS.map(e => e.value))
};
