import PropTypes from 'prop-types';

import { HERO_BANNER_STYLE_OPTIONS_VALUES, SIZES_OPTIONS_VALUES, IMAGE_SCALE_TYPES_VALUES,
    TEXT_ALIGN_OPTIONS_VALUES, TEXT_SIZE_OPTIONS_VALUES, BUTTON_TYPES_VALUES,
    FOREGROUND_IMAGE_ALIGN_OPTIONS, FOREGROUND_IMAGE_SIZE_TYPES,
    IMAGE_STYLE_TEXT_POSITION_OPTIONS } from '../hero-banner';
import { imageUploaderShape } from '../../schema/prop-types/image-uploader';

export const heroBannerSearchBarPropTypes = {
    searchBarWidth: PropTypes.number,
    searchCornerRadius: PropTypes.number,
    searchPlaceholder: PropTypes.string,
    searchIcon: PropTypes.shape(imageUploaderShape),
    searchPlaceholderTextColor: PropTypes.string,
    searchBorderColor: PropTypes.string,
    searchBackgroundColor: PropTypes.string,
    searchButtonColor: PropTypes.string,
    searchIconColor: PropTypes.string
};

export const heroBannerPropTypes = {
    style: PropTypes.oneOf(HERO_BANNER_STYLE_OPTIONS_VALUES),
    height: PropTypes.oneOf(SIZES_OPTIONS_VALUES),
    isTaglineVisible: PropTypes.bool,
    isTitleVisible: PropTypes.bool,
    isTextVisible: PropTypes.bool,
    isButton1Visible: PropTypes.bool,
    isButton2Visible: PropTypes.bool,
    isSearchBarVisible: PropTypes.bool,
    tagline: PropTypes.string,
    title: PropTypes.string,
    text: PropTypes.string,
    button1Label: PropTypes.string,
    button2Label: PropTypes.string,
    backgroundImage: PropTypes.shape(imageUploaderShape),
    imageSize: PropTypes.oneOf(IMAGE_SCALE_TYPES_VALUES),
    taglineColor: PropTypes.string,
    titleColor: PropTypes.string,
    descriptionColor: PropTypes.string,
    overlayColor: PropTypes.string,
    backgroundColor: PropTypes.string,
    shadowColor: PropTypes.string,
    textAlignment: PropTypes.oneOf(TEXT_ALIGN_OPTIONS_VALUES),
    textSize: PropTypes.oneOf(TEXT_SIZE_OPTIONS_VALUES),
    button1Type: PropTypes.oneOf(BUTTON_TYPES_VALUES),
    button1Link: PropTypes.string,
    button2Type: PropTypes.oneOf(BUTTON_TYPES_VALUES),
    button2Link: PropTypes.string,
    ...heroBannerSearchBarPropTypes
};

const {
    style,
    ...restOfHeroBannerPropTypes
} = heroBannerPropTypes;

export const heroStylePropTypes = restOfHeroBannerPropTypes;

const { textPosition,
    searchBarWidth,
    ...restOfHeroStylePropTypes } = heroStylePropTypes;

export const imageStylePropTypes = {
    ...restOfHeroStylePropTypes,
    foregroundImage: PropTypes.shape(imageUploaderShape),
    foregroundImagePosition: PropTypes.oneOf(FOREGROUND_IMAGE_ALIGN_OPTIONS),
    foregroundImageSize: PropTypes.oneOf(FOREGROUND_IMAGE_SIZE_TYPES),
    textPositionImageStyle: IMAGE_STYLE_TEXT_POSITION_OPTIONS,
    searchBarWidthImageStyle: PropTypes.number
};
