import React from 'react';
import PropTypes from 'prop-types';

import { HERO_STYLE, IMAGE_STYLE, VIDEO_STYLE, HERO_BANNER_STYLE_OPTIONS, SIZES_OPTIONS,
    IMAGE_SCALE_TYPES, TEXT_ALIGN_OPTIONS, TEXT_POSITION_OPTIONS, TEXT_SIZE_OPTIONS,
    BUTTON_TYPES, FOREGROUND_IMAGE_ALIGN_OPTIONS, IMAGE_STYLE_TEXT_POSITION_OPTIONS,
    FOREGROUND_IMAGE_SIZE_TYPES }
    from '../../constants/components/hero-banner';
import { heroBannerSearchBarSchemaForm, conditionalImageStyleAttributes,
    conditionalNotImageStyleAttributes } from '../../constants/components/schemas/hero-banner';
import { heroBannerPropTypes } from '../../constants/components/prop-types/hero-banner';
import { NAMESPACES } from '../../constants/namespaces';
import { TOGGLE_CHECK, DROPDOWN, COLORPICKER, RADIO, IMAGE_UPLOADER,
    INPUT, GROUP_HEADER } from '../../constants/schemaComponentTypes';
import withListener from '../withListener';

import HeroStyle from '../../atoms/hero-banner-styles/hero-style/HeroStyle';
import ImageStyle from '../../atoms/hero-banner-styles/image-style/ImageStyle';
import VideoStyle from '../../atoms/hero-banner-styles/video-style/VideoStyle';

const HERO_BANNER_STYLE_COMPONENTS = {
    [HERO_STYLE]: HeroStyle,
    [IMAGE_STYLE]: ImageStyle,
    [VIDEO_STYLE]: VideoStyle
};

const HeroBanner = ({
    data,
    settings
}) => {
    const {
        style,
        ...restSettings
    } = settings;

    const { i18n, locale } = data;

    const Component = HERO_BANNER_STYLE_COMPONENTS[style];

    return (
        <Component settings={restSettings} i18n={i18n} locale={locale} />
    );
};

const heroBannerForm = themeColors => ({
    style: {
        title: 'uieditor.sfbComponent.heroBanner.style.title',
        type: RADIO,
        defaultValue: HERO_BANNER_STYLE_OPTIONS[0].value,
        options: HERO_BANNER_STYLE_OPTIONS
    },
    height: {
        title: 'uieditor.sfbComponent.heroBanner.height.title',
        type: DROPDOWN,
        defaultValue: SIZES_OPTIONS[2].value,
        options: SIZES_OPTIONS
    },
    displaySettingsHeading: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.heroBanner.displaySettingsHeading.title',
        symbol: 'style'
    },
    isTaglineVisible: {
        label: 'uieditor.sfbComponent.heroBanner.isTaglineVisible.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    isTitleVisible: {
        label: 'uieditor.sfbComponent.heroBanner.isTitleVisible.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    isTextVisible: {
        label: 'uieditor.sfbComponent.heroBanner.isTextVisible.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    isButton1Visible: {
        label: 'uieditor.sfbComponent.heroBanner.isButton1Visible.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    isButton2Visible: {
        label: 'uieditor.sfbComponent.heroBanner.isButton2Visible.label',
        defaultValue: false,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    isSearchBarVisible: {
        label: 'uieditor.sfbComponent.heroBanner.isSearchBarVisible.label',
        defaultValue: false,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    contentHeading: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.heroBanner.contentHeading.title',
        symbol: 'style'
    },
    tagline: {
        title: 'uieditor.sfbComponent.heroBanner.tagline.title',
        type: INPUT,
        defaultValue: 'uieditor.sfbComponent.heroBanner.tagline.defaultValue',
        placeholder: 'uieditor.sfbComponent.heroBanner.tagline.placeholder',
        isLocalized: true
    },
    title: {
        title: 'uieditor.sfbComponent.heroBanner.title.title',
        type: INPUT,
        isLocalized: true,
        defaultValue: 'uieditor.sfbComponent.heroBanner.title.defaultValue'
    },
    text: {
        title: 'uieditor.sfbComponent.heroBanner.text.title',
        type: INPUT,
        defaultValue: 'uieditor.sfbComponent.heroBanner.text.defaultValue',
        isLocalized: true
    },
    button1Label: {
        title: 'uieditor.sfbComponent.heroBanner.button1Label.title',
        type: INPUT,
        isLocalized: true,
        defaultValue: 'uieditor.sfbComponent.heroBanner.button1Label.defaultValue'
    },
    button2Label: {
        title: 'uieditor.sfbComponent.heroBanner.button2Label.title',
        type: INPUT,
        isLocalized: true,
        defaultValue: 'uieditor.sfbComponent.heroBanner.button2Label.defaultValue'
    },
    backgroundImage: {
        title: 'uieditor.sfbComponent.heroBanner.backgroundImage.title',
        caption: 'uieditor.sfbComponent.heroBanner.backgroundImage.caption',
        placeholder: 'uieditor.sfbComponent.heroBanner.backgroundImage.placeholder',
        defaultValue: {
            filename: '',
            type: IMAGE_UPLOADER,
            url: '',
            alt: ''
        },
        type: IMAGE_UPLOADER,
        required: false,
        isAltVisible: true
    },
    imageSize: {
        title: 'uieditor.sfbComponent.heroBanner.imageSize.title',
        type: RADIO,
        defaultValue: IMAGE_SCALE_TYPES[0].value,
        options: IMAGE_SCALE_TYPES
    },
    foregroundImageSettingsHeading: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.heroBanner.foregroundImageSettingsHeading.title',
        symbol: 'style',
        conditionalAttributes: conditionalImageStyleAttributes
    },
    foregroundImage: {
        title: 'uieditor.sfbComponent.heroBanner.foregroundImage.title',
        caption: 'uieditor.sfbComponent.heroBanner.foregroundImage.caption',
        placeholder: 'uieditor.sfbComponent.heroBanner.foregroundImage.placeholder',
        defaultValue: {
            filename: '',
            type: 'IMAGE_UPLOADER',
            url: '',
            alt: ''
        },
        type: IMAGE_UPLOADER,
        required: false,
        isAltVisible: true,
        conditionalAttributes: conditionalImageStyleAttributes
    },
    foregroundImagePosition: {
        title: 'uieditor.sfbComponent.heroBanner.foregroundImagePosition.title',
        type: RADIO,
        defaultValue: FOREGROUND_IMAGE_ALIGN_OPTIONS[0].value,
        options: FOREGROUND_IMAGE_ALIGN_OPTIONS,
        conditionalAttributes: conditionalImageStyleAttributes
    },
    foregroundImageSize: {
        title: 'uieditor.sfbComponent.heroBanner.foregroundImageSize.title',
        type: RADIO,
        defaultValue: FOREGROUND_IMAGE_SIZE_TYPES[0].value,
        options: FOREGROUND_IMAGE_SIZE_TYPES,
        conditionalAttributes: conditionalImageStyleAttributes
    },
    contentSettingsHeading: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.heroBanner.contentSettingsHeading.title',
        symbol: 'style'
    },
    taglineColor: {
        title: 'uieditor.sfbComponent.heroBanner.taglineColor.title',
        defaultValue: '#474747',
        type: COLORPICKER
    },
    titleColor: {
        title: 'uieditor.sfbComponent.heroBanner.titleColor.title',
        defaultValue: '#474747',
        type: COLORPICKER
    },
    descriptionColor: {
        title: 'uieditor.sfbComponent.heroBanner.descriptionColor.title',
        defaultValue: '#474747',
        type: COLORPICKER
    },
    overlayColor: {
        title: 'uieditor.sfbComponent.heroBanner.overlayColor.title',
        defaultValue: 'rgba(0,0,0,0.4)',
        type: COLORPICKER
    },
    backgroundColor: {
        title: 'uieditor.sfbComponent.heroBanner.backgroundColor.title',
        defaultValue: '#F4F4F4',
        type: COLORPICKER
    },
    shadowColor: {
        title: 'uieditor.sfbComponent.heroBanner.shadowColor.title',
        defaultValue: '#C3C3C3',
        type: COLORPICKER
    },
    textAlignment: {
        title: 'uieditor.sfbComponent.heroBanner.textAlignment.title',
        type: DROPDOWN,
        defaultValue: TEXT_ALIGN_OPTIONS[0].value,
        options: TEXT_ALIGN_OPTIONS
    },
    textPosition: {
        title: 'uieditor.sfbComponent.heroBanner.textPosition.title',
        type: DROPDOWN,
        defaultValue: TEXT_POSITION_OPTIONS[0].value,
        options: TEXT_POSITION_OPTIONS,
        conditionalAttributes: conditionalNotImageStyleAttributes
    },
    textPositionImageStyle: {
        title: 'uieditor.sfbComponent.heroBanner.textPositionImageStyle.title',
        type: DROPDOWN,
        defaultValue: IMAGE_STYLE_TEXT_POSITION_OPTIONS[0].value,
        options: IMAGE_STYLE_TEXT_POSITION_OPTIONS,
        conditionalAttributes: conditionalImageStyleAttributes
    },
    textSize: {
        title: 'uieditor.sfbComponent.heroBanner.textSize.title',
        type: DROPDOWN,
        defaultValue: TEXT_SIZE_OPTIONS[1].value,
        options: TEXT_SIZE_OPTIONS
    },
    button1Type: {
        title: 'uieditor.sfbComponent.heroBanner.button1Type.title',
        type: RADIO,
        defaultValue: BUTTON_TYPES[0].value,
        options: BUTTON_TYPES
    },
    button1Link: {
        title: 'uieditor.sfbComponent.heroBanner.button1Link.title',
        type: INPUT,
        placeholder: 'uieditor.sfbComponent.heroBanner.button1Link.placeholder',
        caption: 'uieditor.sfbComponent.heroBanner.button1Link.caption'
    },
    button2Type: {
        title: 'uieditor.sfbComponent.heroBanner.button2Type.title',
        type: RADIO,
        defaultValue: BUTTON_TYPES[0].value,
        options: BUTTON_TYPES
    },
    button2Link: {
        title: 'uieditor.sfbComponent.heroBanner.button2Link.title',
        type: INPUT,
        placeholder: 'uieditor.sfbComponent.heroBanner.button2Link.placeholder',
        caption: 'uieditor.sfbComponent.heroBanner.button2Link.caption'
    },
    ...heroBannerSearchBarSchemaForm(themeColors)
});

const getPrimaryThemeColors = () => {
    try {
        const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primaryColor');
        const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondaryColor');
        return { primaryColor, secondaryColor };
    } catch (e) {
        console.error('Unable to find primary colors from SFB CSS file.', e);
        return { primaryColor: '#0076CE', secondaryColor: '' };
    }
};

HeroBanner.schema = () => ({
    name: 'HeroBanner',
    title: 'uieditor.sfbComponent.heroBanner.title',
    iconName: 'banner',
    componentTitleKey: 'title',
    orderableSection: [
        NAMESPACES.home
    ],
    form: heroBannerForm(getPrimaryThemeColors()),
    marketplaceData: {
        i18n: 'i18n',
        locale: 'config.locale.code'
    }
});

HeroBanner.propTypes = {
    data: PropTypes.shape({
        locale: PropTypes.string,
        i18n: PropTypes.shape({
            learnMore: PropTypes.string,
            search: PropTypes.string
        })
    }),
    settings: PropTypes.shape(heroBannerPropTypes)
};

HeroBanner.defaultProps = {
    data: {
        i18n: {
            learnMore: 'Learn more',
            search: 'Search'
        }
    },
    settings: {
        style: HERO_STYLE
    }
};

export default withListener(HeroBanner);
