import { TOGGLE_CHECK, DROPDOWN, COLORPICKER, RADIO, SLIDER, INPUT, TEXTAREA, IMAGE_UPLOADER } from '../../../schemaComponentTypes';
import { LEFT, RIGHT, CENTER } from '../../../alignment';
import { PRIMARY, SECONDARY, LINK } from '../../../components/schemas/button-types';
import { SQUARE_MASK, CIRCLE_MASK } from '../../../components/schemas/image-masks';
import { SMALL, MEDIUM, LARGE } from '../../../sizes';
import { SCALE_TO_FILL, SCALE_TO_FIT } from '../../../components/schemas/image-sizes';

import CardStyle from '../../../../atoms/product-group-tiles/card-style/CardStyle';

const SIZES_OPTIONS = [SMALL, MEDIUM, LARGE];
const ALIGN_OPTIONS = [LEFT, CENTER, RIGHT];
const BUTTON_TYPES = [PRIMARY, SECONDARY, LINK];
const IMAGE_MASK_TYPES = [SQUARE_MASK, CIRCLE_MASK];
const IMAGE_SIZE_TYPES = [SCALE_TO_FIT, SCALE_TO_FILL];

export const cardStyleForm = {
    size: {
        title: 'uieditor.sfbComponent.tiles.size.title',
        type: RADIO,
        defaultValue: SIZES_OPTIONS[2].value,
        options: SIZES_OPTIONS
    },
    customImage: {
        title: 'uieditor.sfbComponent.tiles.customImage.title',
        caption: 'uieditor.sfbComponent.tiles.customImage.caption',
        placeholder: 'uieditor.sfbComponent.tiles.customImage.placeholder',
        defaultValue: {
            filename: '',
            type: 'IMAGE_UPLOADER',
            url: '',
            alt: ''
        },
        type: IMAGE_UPLOADER,
        required: false,
        isAltVisible: true
    },
    imageBackgroundColor: {
        title: 'uieditor.sfbComponent.tiles.imageBackgroundColor.title',
        type: COLORPICKER,
        defaultValue: '#ffffff'
    },
    customLink: {
        title: 'uieditor.sfbComponent.tiles.customLink.title',
        type: INPUT,
        defaultValue: ''
    },
    imageSize: {
        title: 'uieditor.sfbComponent.tiles.imageSize.title',
        type: RADIO,
        defaultValue: IMAGE_SIZE_TYPES[1].value,
        options: IMAGE_SIZE_TYPES
    },
    displayUpperTitle: {
        label: 'uieditor.sfbComponent.tiles.displayUpperTitle.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    upperTitleAlignment: {
        title: 'uieditor.sfbComponent.tiles.upperTitleAlignment.label',
        type: DROPDOWN,
        defaultValue: ALIGN_OPTIONS[0].value,
        options: ALIGN_OPTIONS
    },
    buttonAlignment: {
        title: 'uieditor.sfbComponent.tiles.buttonAlignment.label',
        type: DROPDOWN,
        defaultValue: ALIGN_OPTIONS[1].value,
        options: ALIGN_OPTIONS
    },
    textAlignment: {
        title: 'uieditor.sfbComponent.tiles.textAlignment.label',
        type: DROPDOWN,
        defaultValue: ALIGN_OPTIONS[1].value,
        options: ALIGN_OPTIONS
    },
    upperTitle: {
        title: 'uieditor.sfbComponent.tiles.upperTitle.title',
        type: INPUT,
        defaultValue: ''
    },
    title: {
        title: 'uieditor.sfbComponent.tiles.title.title',
        type: INPUT,
        defaultValue: ''
    },
    description: {
        title: 'uieditor.sfbComponent.tiles.description.title',
        placeholder: 'uieditor.sfbComponent.tiles.description.placeholder',
        caption: 'uieditor.sfbComponent.tiles.description.caption',
        type: TEXTAREA
    },
    buttonLabel: {
        title: 'uieditor.sfbComponent.tiles.buttonLabel.title',
        type: INPUT,
        defaultValue: ''
    },
    displayTitle: {
        label: 'uieditor.sfbComponent.tiles.displayTitle.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    displayDescription: {
        label: 'uieditor.sfbComponent.tiles.displayDescription.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    cardBackgroundColor: {
        title: 'uieditor.sfbComponent.tiles.cardBackgroundColor.title',
        type: COLORPICKER,
        defaultValue: '#ffffff'
    },
    cardBorderColor: {
        title: 'uieditor.sfbComponent.tiles.cardBorderColor.title',
        type: COLORPICKER,
        defaultValue: '#ffffff'
    },
    displayButton: {
        label: 'uieditor.sfbComponent.tiles.displayButton.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    buttonType: {
        title: 'uieditor.sfbComponent.tiles.buttonType.title',
        type: RADIO,
        defaultValue: BUTTON_TYPES[0].value,
        options: BUTTON_TYPES
    },
    imageMask: {
        title: 'uieditor.sfbComponent.tiles.imageMask.title',
        type: RADIO,
        defaultValue: IMAGE_MASK_TYPES[0].value,
        options: IMAGE_MASK_TYPES
    },
    cardCornerRadius: {
        title: 'uieditor.sfbComponent.tiles.cardCornerRadius.title',
        type: SLIDER,
        defaultValue: 0,
        options: {
            range: true,
            min: 0,
            max: 100,
            step: 1
        }
    },
    imageCornerRadius: {
        title: 'uieditor.sfbComponent.tiles.imageCornerRadius.title',
        type: SLIDER,
        defaultValue: 0,
        options: {
            range: true,
            min: 0,
            max: 100,
            step: 1
        }
    },
    displayShadow: {
        label: 'uieditor.sfbComponent.tiles.displayShadow.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    onHoverShadowOnly: {
        label: 'uieditor.sfbComponent.tiles.onHoverShadowOnly.label',
        defaultValue: false,
        type: TOGGLE_CHECK,
        marginSize: 20,
        conditionalAttributes: {
            isVisible: {
                when: 'displayShadow',
                connector: 'equals',
                value: true
            }
        }
    },
    shadowColor: {
        title: 'uieditor.sfbComponent.tiles.shadowColor.title',
        type: COLORPICKER,
        defaultValue: 'rgba(0,1,0,0.2)'
    },
    displayBorder: {
        label: 'uieditor.sfbComponent.tiles.displayBorder.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    onHoverBorderOnly: {
        label: 'uieditor.sfbComponent.tiles.onHoverBorderOnly.label',
        defaultValue: false,
        type: TOGGLE_CHECK,
        marginSize: 20,
        conditionalAttributes: {
            isVisible: {
                when: 'displayBorder',
                connector: 'equals',
                value: true
            }
        }
    },
    upperTitleColor: {
        title: 'uieditor.sfbComponent.tiles.upperTitleColor.title',
        type: COLORPICKER,
        defaultValue: '#474747'
    },
    titleColor: {
        title: 'uieditor.sfbComponent.tiles.titleColor.title',
        type: COLORPICKER,
        defaultValue: '#474747'
    },
    descriptionColor: {
        title: 'uieditor.sfbComponent.tiles.descriptionColor.title',
        type: COLORPICKER,
        defaultValue: '#474747'
    }
};

CardStyle.schema = () => ({
    name: 'ProductGroupCardStyle',
    title: 'uieditor.sfbComponent.productGroupCardStyle.title',
    form: cardStyleForm
});

export default CardStyle;
