import PropTypes from 'prop-types';

import { SMALL, MEDIUM, LARGE } from '../../sizes';
import { SPECIAL_CHARACTERS_BLOCKLIST, ALLOWED_SPECIAL_CHARACTERS } from '../../regexConstants';
import { TILE_TYPES, CLASSIC, SQUARE, HORIZONTAL, TALL, GRAPHIC } from '../tile';
import { INPUT, RADIO, COLORPICKER, CHECKBOX, SLIDER, GROUP_HEADER, TOGGLE_CHECK, TOGGLE } from '../../schemaComponentTypes';
import { TILE_BACKGROUND, TILE_TEXT_BACKGROUND } from '../../backgroundSettings';
import { productQuickviewSchemaForm } from './product-quickview';

const SLIDE_SIZES = [SMALL, MEDIUM, LARGE];

export const IS_DESCRIPTION_VISIBLE = 'isDescriptionVisible';
export const IS_RATINGS_VISIBLE = 'isRatingsVisible';
export const IS_VENDOR_VISIBLE = 'isVendorVisible';
export const IS_BADGES_VISIBLE = 'isBadgesVisible';
export const IS_RIBBONS_VISIBLE = 'isRibbonsVisible';

const DISPLAY_OPTIONS = [
    { value: IS_DESCRIPTION_VISIBLE, label: 'uieditor.sfbComponent.slider.displayOptions.option.description' },
    { value: IS_RATINGS_VISIBLE, label: 'uieditor.sfbComponent.slider.displayOptions.option.ratings' },
    { value: IS_VENDOR_VISIBLE, label: 'uieditor.sfbComponent.slider.displayOptions.option.vendor' },
    { value: IS_BADGES_VISIBLE, label: 'uieditor.sfbComponent.slider.displayOptions.option.badges' },
    { value: IS_RIBBONS_VISIBLE, label: 'uieditor.sfbComponent.slider.displayOptions.option.ribbons' }
];

const DEFAULT_DISPLAY_OPTIONS = [
    IS_DESCRIPTION_VISIBLE,
    IS_RATINGS_VISIBLE,
    IS_BADGES_VISIBLE,
    IS_RIBBONS_VISIBLE
];

const NUM_ROWS_OPTIONS = [
    { value: '1', label: 'uieditor.sfbComponent.sliderComponent.maxRows.option.one' },
    { value: '2', label: 'uieditor.sfbComponent.sliderComponent.maxRows.option.two' },
    { value: '3', label: 'uieditor.sfbComponent.sliderComponent.maxRows.option.three' }
];

export const productSliderSchema = {
    layout: {
        title: 'uieditor.sfbComponent.slider.layout.title',
        type: RADIO,
        required: false,
        defaultValue: TILE_TYPES[0].value,
        options: TILE_TYPES,
        validation: {
            availableOptions: TILE_TYPES.map(({ value }) => value),
            message: 'uieditor.sfbComponent.radio.validation.message',
            default: 'uieditor.sfbComponent.dropdown.defaultValue'
        }
    },
    sliderOptions: {
        title: 'uieditor.sfbComponent.slider.sliderOptions.title',
        type: TOGGLE,
        required: true,
        defaultValue: true,
        labelOn: 'uieditor.sfbComponent.slider.sliderOptions.scrolling.labelOn',
        labelOff: 'uieditor.sfbComponent.slider.sliderOptions.scrolling.labelOff',
        caption: 'uieditor.sfbComponent.slider.sliderOptions.scrolling.caption',
        customStyle: {
            marginSize: 0
        }
    },
    maxRows: {
        type: RADIO,
        required: true,
        defaultValue: NUM_ROWS_OPTIONS[1].value,
        options: NUM_ROWS_OPTIONS,
        conditionalAttributes: {
            isDisabled: {
                when: 'sliderOptions',
                connector: 'equals',
                value: true
            }
        },
        validation: {
            availableOptions: NUM_ROWS_OPTIONS.map(({ value }) => value),
            message: 'uieditor.sfbComponent.radio.validation.message',
            default: 'uieditor.sfbComponent.dropdown.defaultValue'
        }
    },
    size: {
        title: 'uieditor.sfbComponent.sliderComponent.size.title',
        type: RADIO,
        required: true,
        defaultValue: SLIDE_SIZES[0].value,
        options: SLIDE_SIZES,
        validation: {
            availableOptions: SLIDE_SIZES.map(({ value }) => value),
            message: 'uieditor.sfbComponent.radio.validation.message',
            default: 'uieditor.sfbComponent.dropdown.defaultValue'
        }
    },
    sliderSettings: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.slider.settings.title',
        symbol: 'settings'
    },
    sliderTitle: {
        title: 'uieditor.sfbComponent.slider.sliderTitle.title',
        placeholder: 'uieditor.sfbComponent.slider.sliderTitle.placeholder',
        defaultValue: 'uieditor.sfbComponent.slider.sliderTitle.defaultValue',
        type: INPUT,
        required: false,
        validation: {
            pattern: ALLOWED_SPECIAL_CHARACTERS,
            message: 'uieditor.sfbComponent.input.validation.message'
        }
    },
    buttonLabel: {
        title: 'uieditor.sfbComponent.sliderComponent.buttonLabel.title',
        placeholder: 'uieditor.sfbComponent.sliderComponent.buttonLabel.placeholder',
        defaultValue: 'uieditor.sfbComponent.sliderComponent.buttonLabel.defaultValue',
        type: INPUT,
        required: true,
        validation: {
            pattern: SPECIAL_CHARACTERS_BLOCKLIST,
            message: 'uieditor.sfbComponent.input.validation.message'
        }
    },
    borderRadius: {
        title: 'uieditor.sfbComponent.sliderComponent.borderRadius.title',
        type: SLIDER,
        defaultValue: 8,
        options: {
            range: true,
            min: 0,
            max: 35,
            step: 1
        },
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: [SQUARE, TALL, CLASSIC, HORIZONTAL]
            }
        }
    },
    displayOptions: {
        type: CHECKBOX,
        required: false,
        defaultValue: DEFAULT_DISPLAY_OPTIONS,
        options: DISPLAY_OPTIONS,
        validation: {
            availableOptions: DISPLAY_OPTIONS.map(({ value }) => value),
            message: 'uieditor.sfbComponent.checkbox.validation.message'
        }
    },
    hasQuickview: {
        title: 'uieditor.sfbComponent.sliderComponent.hasQuickview.title',
        type: TOGGLE,
        required: true,
        defaultValue: true,
        labelOn: 'uieditor.sfbComponent.sliderComponent.hasQuickview.labelOn',
        labelOff: 'uieditor.sfbComponent.sliderComponent.hasQuickview.labelOff',
        caption: 'uieditor.sfbComponent.sliderComponent.hasQuickview.caption',
        customStyle: {
            marginSize: 0
        }
    },
    quickviewViewMode: {
        ...productQuickviewSchemaForm.quickviewViewMode,
        conditionalAttributes: {
            isDisabled: {
                when: 'hasQuickview',
                connector: 'equals',
                value: false
            }
        }
    },
    cardBorderRadius: {
        title: 'uieditor.sfbComponent.sliderComponent.cardBorderRadius.title',
        type: SLIDER,
        defaultValue: 8,
        options: {
            range: true,
            min: 0,
            max: 35,
            step: 1
        },
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: [SQUARE, TALL, GRAPHIC]
            }
        }
    },
    tileBackgroundColor: {
        title: 'uieditor.sfbComponent.slider.tileBackgroundColor.title',
        defaultValue: TILE_BACKGROUND,
        type: COLORPICKER
    },
    textBackgroundColor: {
        title: 'uieditor.sfbComponent.slider.textBackgroundColor.title',
        defaultValue: TILE_TEXT_BACKGROUND,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: [SQUARE, TALL, GRAPHIC]
            }
        },
        type: COLORPICKER
    },
    isShadowVisible: {
        label: 'uieditor.sfbComponent.sliderComponent.isShadowVisible.label',
        type: TOGGLE_CHECK,
        defaultValue: true,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: [SQUARE, TALL, GRAPHIC]
            }
        }
    },
    tileCtaLabel: {
        title: 'uieditor.sfbComponent.slider.tileCtaLabel.title',
        type: INPUT,
        defaultValue: 'Buy Now',
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: TALL
            }
        }
    }
};

export const productSliderSettingsShape = {
    layout: PropTypes.string,
    size: PropTypes.string,
    sliderOptions: PropTypes.bool,
    maxRows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    sliderTitle: PropTypes.string,
    buttonLabel: PropTypes.string,
    borderRadius: PropTypes.number,
    displayOptions: PropTypes.array,
    hasQuickview: PropTypes.bool,
    quickviewViewMode: PropTypes.string,
    cardBorderRadius: PropTypes.number,
    tileBackgroundColor: PropTypes.string,
    textBackgroundColor: PropTypes.string,
    isShadowVisible: PropTypes.bool,
    tileCtaLabel: PropTypes.string
};

export const productSliderDefaultSettings = {
    layout: CLASSIC,
    size: MEDIUM.value,
    sliderOptions: true,
    maxRows: productSliderSchema.maxRows.defaultValue,
    sliderTitle: 'Slider title',
    buttonLabel: productSliderSchema.buttonLabel.defaultValue,
    borderRadius: 8,
    hasQuickview: false,
    displayOptions: productSliderSchema.displayOptions.defaultValue,
    quickviewViewMode: productSliderSchema.quickviewViewMode.defaultValue,
    cardBorderRadius: 8,
    tileBackgroundColor: TILE_BACKGROUND,
    textBackgroundColor: TILE_TEXT_BACKGROUND,
    isShadowVisible: productSliderSchema.isShadowVisible.defaultValue,
    tileCtaLabel: 'Buy now'
};
