import { configMock, configUserLoggedInMock } from '../config';
import { logoMock } from '../config/logo';
import { userLoggedOutMock } from '../config/user';
import { fetchCartMock } from '../cart';
import { commonMock } from '../common';
import { searchBarMock } from '../common/searchBar';
import { i18nMock } from '../i18n';
import { metaMock } from '../meta';
import { navWithCategoriesMock } from '../nav';
import { categoriesMock } from '../nav/primary-nav/categories';
import { localeMock } from '../config/locale';
import { MENUS } from '../../src/constants/menus';

const { AUXILIARY_BAR_MENU } = MENUS;

// To be removed wen working on Navigation Bar Mobile Menu Story
export const headerNavigationBarMenuMockMobile = [
    {
        label: 'Product Line 1',
        url: '/'
    },
    {
        label: 'Product Line 2',
        url: '/'
    },
    {
        label: 'Product Line 3',
        url: '/'
    },
    {
        label: 'Landing Page 1',
        url: '/'
    },
    {
        label: 'Landing Page 2',
        url: '/'
    },
    {
        label: 'Landing Page 3',
        url: '/'
    },
    {
        label: 'Landing Page 4',
        url: '/'
    },
    {
        label: 'Landing Page 5',
        url: '/'
    },
    {
        label: 'Landing Page 6',
        url: '/'
    },
    {
        label: 'Landing Page 7',
        url: '/'
    },
    {
        label: 'Landing Page 8',
        url: '/'
    },
    {
        label: 'Landing Page 9',
        url: '/'
    }
];

export const headerHomeBarMenuMock = {
    HOME_BAR_MENU: {
        menu: [
            {
                isVisible: true,
                openInNewTab: false,
                title: {
                    value: 'All Products',
                    isLocalized: true,
                    type: 'INPUT'
                },
                link: {
                    value: '',
                    isLocalized: true,
                    type: 'INPUT'
                },
                children: [
                    {
                        isDisabled: false,
                        isVisible: true,
                        link: { value: '', isLocalized: true, type: 'INPUT' },
                        openInNewTab: false,
                        title: { value: 'sub-item1', isLocalized: true, type: 'INPUT' },
                        type: 'CUSTOM_LINK',
                        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e48b4'
                    },
                    {
                        isDisabled: false,
                        isVisible: true,
                        link: { value: '', isLocalized: true, type: 'INPUT' },
                        openInNewTab: false,
                        title: { value: 'sub-item2', isLocalized: true, type: 'INPUT' },
                        type: 'CUSTOM_LINK',
                        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e4834'
                    }
                ]
            }, {
                isVisible: true,
                openInNewTab: false,
                title: {
                    value: 'title2',
                    isLocalized: true,
                    type: 'INPUT'
                },
                link: {
                    value: 'http://www.google.ca/',
                    isLocalized: true,
                    type: 'INPUT'
                },
                children: [
                    {
                        isDisabled: false,
                        isVisible: true,
                        link: { value: '', isLocalized: true, type: 'INPUT' },
                        openInNewTab: false,
                        title: { value: 'sub-item1', isLocalized: true, type: 'INPUT' },
                        type: 'CUSTOM_LINK',
                        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e48b4'
                    },
                    {
                        isDisabled: false,
                        isVisible: true,
                        link: { value: '', isLocalized: true, type: 'INPUT' },
                        openInNewTab: false,
                        title: { value: 'sub-item2', isLocalized: true, type: 'INPUT' },
                        type: 'CUSTOM_LINK',
                        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e4834'
                    }
                ]
            }
        ],
        menuType: 'MENU_LINK'
    }
};

export const headerNavigationBarMenuMock = {
    NAVIGATION_BAR_MENU: {
        menu: [
            {
                isVisible: true,
                openInNewTab: false,
                title: {
                    value: 'All Products',
                    isLocalized: true,
                    type: 'INPUT'
                },
                link: {
                    value: '',
                    isLocalized: true,
                    type: 'INPUT'
                },
                children: [
                    {
                        children: [],
                        isDisabled: false,
                        isVisible: true,
                        link: { value: '', isLocalized: true, type: 'INPUT' },
                        openInNewTab: false,
                        title: { value: 'sub-item1', isLocalized: true, type: 'INPUT' },
                        type: 'CUSTOM_LINK',
                        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e48b4'
                    },
                    {
                        children: [],
                        isDisabled: false,
                        isVisible: true,
                        link: { value: '', isLocalized: true, type: 'INPUT' },
                        openInNewTab: false,
                        title: { value: 'sub-item2', isLocalized: true, type: 'INPUT' },
                        type: 'CUSTOM_LINK',
                        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e4834'
                    }
                ]
            }, {
                isVisible: true,
                openInNewTab: false,
                title: {
                    value: 'title2',
                    isLocalized: true,
                    type: 'INPUT'
                },
                link: {
                    value: 'http://www.google.ca/',
                    isLocalized: true,
                    type: 'INPUT'
                },
                children: [
                    {
                        children: [],
                        isDisabled: false,
                        isVisible: true,
                        link: { value: '', isLocalized: true, type: 'INPUT' },
                        openInNewTab: false,
                        title: { value: 'sub-item1', isLocalized: true, type: 'INPUT' },
                        type: 'CUSTOM_LINK',
                        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e48b4'
                    },
                    {
                        children: [],
                        isDisabled: false,
                        isVisible: true,
                        link: { value: '', isLocalized: true, type: 'INPUT' },
                        openInNewTab: false,
                        title: { value: 'sub-item2', isLocalized: true, type: 'INPUT' },
                        type: 'CUSTOM_LINK',
                        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e4834'
                    }
                ]
            }
        ],
        menuType: 'MENU_LINK'
    }
};

export const headerNavigationBarMenuMockSubItems = [
    {
        children: [
            {
                children: [],
                isDisabled: false,
                isVisible: true,
                link: { value: '', isLocalized: true, type: 'INPUT' },
                openInNewTab: false,
                title: { value: 'sub-item1', isLocalized: true, type: 'INPUT' },
                type: 'CUSTOM_LINK',
                uuid: '9f963371-e2b1-4390-8140-1c2a3c6e48b4'
            },
            {
                children: [],
                isDisabled: false,
                isVisible: true,
                link: { value: '', isLocalized: true, type: 'INPUT' },
                openInNewTab: false,
                title: { value: 'sub-item2', isLocalized: true, type: 'INPUT' },
                type: 'CUSTOM_LINK',
                uuid: '9f963371-e2b1-4390-8140-1c2a3c6e4834'
            }
        ],
        isDisabled: false,
        isVisible: true,
        link: { value: '', isLocalized: true, type: 'INPUT' },
        openInNewTab: false,
        title: { value: 'Product Group', isLocalized: true, type: 'INPUT' },
        type: 'CUSTOM_LINK',
        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e48b4'
    },
    {
        children: [],
        isDisabled: false,
        isVisible: true,
        link: { value: '', isLocalized: true, type: 'INPUT' },
        openInNewTab: false,
        title: { value: 'Untitled 1', isLocalized: true, type: 'INPUT' },
        type: 'CUSTOM_LINK',
        uuid: '9f963371-e2b1-4390-8140-1c2a3c6e4834'
    }
];

export const headerHomeBarMenuSettingsMock = [
    {
        label: 'Item 1',
        url: 'https://google.ca'
    },
    {
        label: 'Item 2',
        url: 'https://google.ca'
    }
];

export const headerHomeBarDataMock = {
    logo: logoMock,
    user: userLoggedOutMock,
    fetchCart: fetchCartMock,
    marketplaceName: configMock.marketplaceName,
    searchBar: searchBarMock,
    i18n: i18nMock,
    displaySearchBar: false,
    baseUrl: 'https://testmarketplace.appdirect.com',
    toggleHeaderScrimFunction: () => { },
    categories: categoriesMock
};

export const headerHomeBarSettingsMock = {
    displayLoginLink: {
        value: true,
        type: 'TOGGLE'
    },
    logoHeight: {
        value: 82,
        type: 'SLIDER'
    },
    logoTargetType: {
        value: 'home_page',
        type: 'RADIO'
    },
    homeBarBackgroundColor: {
        value: '#0076ce',
        type: 'COLORPICKER'
    },
    displayRegistrationLink: {
        value: true,
        type: 'TOGGLE'
    },
    logoTheme: {
        value: 'logoImage',
        type: 'LOGO'
    },
    displayCart: {
        value: true,
        type: 'TOGGLE'
    },
    homeBarTextHoverColor: {
        value: '#fcfdfd',
        type: 'COLORPICKER'
    },
    homeBarBorderColor: {
        value: '#0076ce',
        type: 'COLORPICKER'
    },
    homeBarTextColor: {
        value: '#ffffff',
        type: 'COLORPICKER'
    },
    homeBarTextSize: {
        value: 'large',
        type: 'DROPDOWN'
    },
    homeBarTextActiveColor: {
        value: '#fcfdfd',
        type: 'COLORPICKER'
    },
    homeBarPadding: {
        value: '15',
        type: 'SLIDER'
    }
};

export const headerAuxiliaryBarDataMock = {
    locale: localeMock
};

export const headerAuxiliaryBarMenusMock = {
    [AUXILIARY_BAR_MENU]: {
        menu: [{
            isVisible: true,
            openInNewTab: false,
            title: {
                value: 'title1',
                isLocalized: true,
                type: 'INPUT'
            },
            link: {
                value: 'http://www.google.ca/',
                isLocalized: true,
                type: 'INPUT'
            },
            children: []
        }, {
            isVisible: true,
            openInNewTab: false,
            title: {
                value: 'title2',
                isLocalized: true,
                type: 'INPUT'
            },
            link: {
                value: 'http://www.google.ca/',
                isLocalized: true,
                type: 'INPUT'
            },
            children: [{
                children: [],
                isDisabled: false,
                isVisible: true,
                link: { value: '', isLocalized: true, type: 'INPUT' },
                openInNewTab: false,
                title: { value: 'sub-item1', isLocalized: true, type: 'INPUT' },
                type: 'CUSTOM_LINK',
                uuid: '9f963371-e2b1-4390-8140-1c2a3c6e48b4'
            }, {
                children: [],
                isDisabled: false,
                isVisible: true,
                link: { value: '', isLocalized: true, type: 'INPUT' },
                openInNewTab: false,
                title: { value: 'sub-item2', isLocalized: true, type: 'INPUT' },
                type: 'CUSTOM_LINK',
                uuid: '9f963371-e2b1-4390-8140-1c2a3c6e4834'
            }]
        }],
        menuType: 'MENU_LINK'
    }
};

export const headerNavigationBarDataMock = {
    searchBar: searchBarMock,
    displaySearchBar: false,
    categories: categoriesMock,
    config: configMock
};

export const headerNavigationBarDataMockWithSearchBar = {
    searchBar: searchBarMock,
    displaySearchBar: true,
    categories: categoriesMock,
    config: configMock
};

export const headerAuxiliaryBarSettingsMock = {
    auxBarTextColorHover: {
        value: '#fcfdfd',
        type: 'COLORPICKER'
    },
    auxBarBackgroundColor: {
        value: '#0076ce',
        type: 'COLORPICKER'
    },
    displayLanguageSwitcher: {
        value: true,
        type: 'TOGGLE'
    },
    auxBarTextSize: {
        value: 'medium',
        type: 'DROPDOWN'
    },
    auxBarTextColor: {
        value: '#ffffff',
        type: 'COLORPICKER'
    },
    auxBarBorderColor: {
        value: '#0076ce',
        type: 'COLORPICKER'
    },
    auxBarTextAlignment: {
        value: 'right',
        type: 'DROPDOWN'
    },
    auxBarLinkSpacing: {
        value: 15,
        type: 'SLIDER'
    },
    auxBarHeight: {
        value: 40,
        type: 'SLIDER'
    }
};

export const headerNavigationBarSettingsMock = {
    navBarTextSize: {
        value: 'medium',
        type: 'DROPDOWN'
    },
    navBarPadding: {
        value: 10,
        type: 'SLIDER'
    },
    navBarBorderColor: {
        value: '#cbcbcb',
        type: 'COLORPICKER'
    },
    navBarBackgroundColor: {
        value: '#ffffff',
        type: 'COLORPICKER'
    },
    navBarTextAlignment: {
        value: 'left',
        type: 'DROPDOWN'
    },
    navBarTextColor: {
        value: '#474747',
        type: 'COLORPICKER'
    },
    navBarLinkSpacing: {
        value: 20,
        type: 'SLIDER'
    },
    navBarTextHoverColor: {
        value: '#0076ce',
        type: 'COLORPICKER'
    }
};

export const headerAnnouncementBarSettingsMock = {
    announcementBarBackgroundColor: {
        value: '#04296a',
        type: 'COLORPICKER'
    },
    announcementBarTextColor: {
        value: '#ffffff',
        type: 'COLORPICKER'
    },
    announcementBarHeight: {
        value: 30,
        type: 'SLIDER'
    },
    announcementBarTextAlignment: {
        value: 'center',
        type: 'DROPDOWN'
    },
    announcementBarLinkTextColor: {
        value: '#ffffff',
        type: 'COLORPICKER'
    },
    announcementBarMessage: {
        value: 'OUR RESPONSE TO COVID-19 [SEE FAQs]',
        type: 'TEXTAREA'
    },
    announcementBarBorderColor: {
        value: 'rgba(255, 255, 255, 0)',
        type: 'COLORPICKER'
    },
    announcementBarTextSize: {
        value: 'medium',
        type: 'DROPDOWN'
    }
};

export const headerSearchBarSettingsMock = {
    searchPlaceholder: {
        value: 'Search all products',
        type: 'INPUT'
    },
    searchBarHeight: {
        value: 'medium',
        type: 'DROPDOWN'
    },
    searchCornerRadius: {
        value: '24',
        type: 'SLIDER'
    },
    searchBarLocation: {
        value: 'navigation_bar',
        type: 'RADIO'
    },
    searchBorderColor: {
        value: '#cbcbcb',
        type: 'COLORPICKER'
    },
    searchBarMaxWidth: {
        value: 500,
        type: 'SLIDER'
    },
    searchBorderVisible: {
        value: true,
        type: 'TOGGLE'
    },
    searchIconColor: {
        value: '#ffffff',
        type: 'COLORPICKER'
    },
    searchBackgroundColor: {
        value: '#ffffff',
        type: 'COLORPICKER'
    },
    searchButtonColor: {
        value: '#0076ce',
        type: 'COLORPICKER'
    }
};

export const headerDataMock = {
    common: commonMock,
    config: configMock,
    i18n: i18nMock,
    nav: navWithCategoriesMock,
    meta: metaMock
};

export const headerDataMockLoggedIn = {
    ...headerDataMock,
    config: configUserLoggedInMock
};

export const headerMenusMock = {
    ...headerAuxiliaryBarMenusMock,
    ...headerHomeBarMenuMock
};

export const headerComponentsMock = {
    HeaderSearchBar: headerSearchBarSettingsMock,
    'HeaderNavigationBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75688': headerNavigationBarSettingsMock,
    'HeaderAnnouncementBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75685': headerAnnouncementBarSettingsMock,
    'HeaderHomeBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75687': headerHomeBarSettingsMock,
    'HeaderAuxiliaryBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75686': headerAuxiliaryBarSettingsMock
};

export const headerOrderableComponentsMock = [
    {
        name: 'HeaderAnnouncementBar',
        id: 'HeaderAnnouncementBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75685',
        isVisible: true
    },
    {
        name: 'HeaderAuxiliaryBar',
        id: 'HeaderAuxiliaryBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75686',
        isVisible: true
    },
    {
        name: 'HeaderHomeBar',
        id: 'HeaderHomeBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75687',
        isVisible: true
    },
    {
        name: 'HeaderNavigationBar',
        id: 'HeaderNavigationBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75688',
        isVisible: true
    }
];

export const headerSettingsFullMocks = {
    components: headerComponentsMock,
    orderableComponents: headerOrderableComponentsMock
};

export const identityProviderFalse = {
    showProfiles: true,
    identityProvider: false
};

export const identityProviderTrue = {
    showProfiles: true,
    identityProvider: true
};

export const showProfilesFalse = {
    showProfiles: false
};

export const showProfilesTrue = {
    showProfiles: true
};
