import React from 'react';
import PropTypes from 'prop-types';
// import { NAMESPACES } from '../../constants/namespaces';
import { TOGGLE_CHECK, DROPDOWN, COLORPICKER, RADIO,
    SLIDER, INPUT, TEXTAREA, PRODUCT_GROUP_LIST } from '../../constants/schemaComponentTypes';
import { LEFT, RIGHT, CENTER, SPACE_AROUND, SPACE_BETWEEN, SPACE_EVENLY } from '../../constants/alignment';
import { PRIMARY, SECONDARY, LINK } from '../../constants/components/schemas/button-types';
import { SMALL, MEDIUM, LARGE } from '../../constants/sizes';
import { CARD_TILE, GRAPHIC_TILE, HORIZONTAL_TILE, CARD, GRAPHIC, HORIZONTAL } from '../../constants/components/tile';

import { createNamespace } from '../../tools/namingTools';
import FlexContainer from '../../atoms/flex-container/FlexContainer';
import CardStyle from '../../atoms/product-group-tiles/card-style/CardStyle';
import GraphicStyle from '../../atoms/product-group-tiles/graphic-style/GraphicStyle';
import HorizontalStyle from '../../atoms/product-group-tiles/horizontal-style/HorizontalStyle';
import withListener from '../withListener';
import { defaultValues as cardStyleDefaultValues } from '../../constants/atoms/product-group-tiles';
import { SPECIAL_CHARACTERS_BLOCKLIST } from '../../constants/regexConstants';

import './styles/ProductGroup.scss';

const n = createNamespace('ProductGroup');

export const PRODUCT_GROUP_TILE_COMPONENTS = {
    [CARD]: CardStyle,
    [GRAPHIC]: GraphicStyle,
    [HORIZONTAL]: HorizontalStyle
};

const ProductGroup = ({ data, settings, defaultValues }) => {
    // eslint-disable-next-line no-unused-vars
    const { i18n } = data; // TO DO
    const {
        style,
        rowGap,
        columnGap,
        contentAlignment,
        headerTitle,
        headerDescription,
        headerTextAlignment,
        displayHeaderTitle,
        displayHeaderDescription,
        containerBackgroundColor,
        productGroupList,
        ...otherProps
    } = settings;

    const headerTitleValue = headerTitle || defaultValues?.headerTitle;
    const headerDescriptionValue = headerDescription || defaultValues?.headerDescription;
    const displayHeaderWrapper = displayHeaderTitle || displayHeaderDescription;
    const productGroupListWithKeys = productGroupList?.map(item => ({
        key: item.customLink || item.link,
        ...item,
        ...otherProps
    }));

    const componentData = {
        defaultValues: cardStyleDefaultValues
    };

    const wrapperVariables = {
        'container-background-color': containerBackgroundColor
    };

    const headerWrapperVariables = {
        'header-text-alignment': headerTextAlignment
    };

    const component = PRODUCT_GROUP_TILE_COMPONENTS[style];

    return (
        <div {...n('wrapper').withVariables(wrapperVariables).props}>
            { displayHeaderWrapper
                && (
                    <div {...n('headerWrapper').withVariables(headerWrapperVariables).props}>
                        { displayHeaderTitle && <div {...n('headerTitle').props}>{headerTitleValue}</div>}
                        { displayHeaderDescription && <div {...n('headerDescription').props}>{headerDescriptionValue}</div>}
                    </div>
                )}
            <FlexContainer
                component={component}
                flexContainerSettings={{
                    rowGap,
                    columnGap,
                    displayBorder: settings.displayBorder,
                    contentAlignment
                }}
                itemList={productGroupListWithKeys}
                {...componentData}
            />
        </div>
    );
};

const STYLE_OPTIONS = [CARD_TILE, GRAPHIC_TILE, HORIZONTAL_TILE];
const SIZES_OPTIONS = [SMALL, MEDIUM, LARGE];
const ALIGN_OPTIONS = [LEFT, CENTER, RIGHT];
const FLEX_CONTAINER_ALIGN_OPTIONS = [LEFT, CENTER, RIGHT, SPACE_AROUND, SPACE_BETWEEN, SPACE_EVENLY];
const BUTTON_TYPES = [PRIMARY, SECONDARY, LINK];

const productGroupForm = {
    style: {
        title: 'uieditor.sfbComponent.productGroup.style.title',
        type: RADIO,
        defaultValue: STYLE_OPTIONS[0].value,
        options: STYLE_OPTIONS
    },
    productGroupList: {
        title: 'uieditor.sfbComponent.productGroupList.title',
        type: PRODUCT_GROUP_LIST
    },
    productGroupTabTitle: {
        title: 'uieditor.sfbComponent.productGroupTabTitle.title',
        placeholder: 'uieditor.sfbComponent.productGroupTabTitle.placeholder',
        defaultValue: 'uieditor.sfbComponent.productGroupTabTitle.defaultValue',
        type: INPUT,
        required: false,
        validation: {
            pattern: SPECIAL_CHARACTERS_BLOCKLIST,
            message: 'uieditor.sfbComponent.input.validation.message'
        }
    },
    size: {
        title: 'uieditor.sfbComponent.productGroup.size.title',
        type: RADIO,
        defaultValue: SIZES_OPTIONS[2].value,
        options: SIZES_OPTIONS
    },
    rowGap: {
        title: 'uieditor.sfbComponent.productGroup.rowGap.title',
        type: SLIDER,
        defaultValue: 28,
        options: {
            range: true,
            min: 0,
            max: 35,
            step: 1
        }
    },
    columnGap: {
        title: 'uieditor.sfbComponent.productGroup.columnGap.title',
        type: SLIDER,
        defaultValue: 28,
        options: {
            range: true,
            min: 0,
            max: 35,
            step: 1
        }
    },
    contentAlignment: {
        title: 'uieditor.sfbComponent.productGroup.contentAlignment.title',
        type: DROPDOWN,
        defaultValue: FLEX_CONTAINER_ALIGN_OPTIONS[1].value,
        options: FLEX_CONTAINER_ALIGN_OPTIONS
    },
    displayHeaderTitle: {
        label: 'uieditor.sfbComponent.productGroup.displayHeaderTitle.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    displayHeaderDescription: {
        label: 'uieditor.sfbComponent.productGroup.displayHeaderDescription.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    displayUpperTitle: {
        label: 'uieditor.sfbComponent.productGroup.displayUpperTitle.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    displayTitle: {
        label: 'uieditor.sfbComponent.productGroup.displayTitle.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    displayDescription: {
        label: 'uieditor.sfbComponent.productGroup.displayDescription.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    displayButton: {
        label: 'uieditor.sfbComponent.productGroup.displayButton.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    headerTitle: {
        title: 'uieditor.sfbComponent.productGroup.headerTitle.title',
        type: INPUT,
        defaultValue: ''
    },
    headerDescription: {
        title: 'uieditor.sfbComponent.productGroup.headerDescription.title',
        placeholder: 'uieditor.sfbComponent.productGroup.headerDescription.placeholder',
        caption: 'uieditor.sfbComponent.productGroup.headerDescription.caption',
        type: TEXTAREA
    },
    headerTextAlignment: {
        title: 'uieditor.sfbComponent.productGroup.headerTextAlignment.title',
        type: DROPDOWN,
        defaultValue: ALIGN_OPTIONS[0].value,
        options: ALIGN_OPTIONS
    },
    containerBackgroundColor: {
        title: 'uieditor.sfbComponent.productGroup.containerBackgroundColor.title',
        type: COLORPICKER,
        defaultValue: '#EAEAEA'
    },
    upperTitleColor: {
        title: 'uieditor.sfbComponent.productGroup.upperTitleColor.title',
        type: COLORPICKER,
        defaultValue: '#474747'
    },
    titleColor: {
        title: 'uieditor.sfbComponent.productGroup.titleColor.title',
        type: COLORPICKER,
        defaultValue: '#474747'
    },
    descriptionColor: {
        title: 'uieditor.sfbComponent.productGroup.descriptionColor.title',
        type: COLORPICKER,
        defaultValue: '#474747'
    },
    imageBackgroundColor: {
        title: 'uieditor.sfbComponent.productGroup.imageBackgroundColor.title',
        type: COLORPICKER,
        defaultValue: '#ffffff'
    },
    cardBackgroundColor: {
        title: 'uieditor.sfbComponent.productGroup.cardBackgroundColor.title',
        type: COLORPICKER,
        defaultValue: '#ffffff'
    },
    cardBorderColor: {
        title: 'uieditor.sfbComponent.productGroup.cardBorderColor.title',
        type: COLORPICKER,
        defaultValue: '#ffffff'
    },
    shadowColor: {
        title: 'uieditor.sfbComponent.productGroup.shadowColor.title',
        type: COLORPICKER,
        defaultValue: 'rgba(0,1,0,0.2)'
    },
    upperTitleAlignment: {
        title: 'uieditor.sfbComponent.productGroup.upperTitleAlignment.label',
        type: DROPDOWN,
        defaultValue: ALIGN_OPTIONS[0].value,
        options: ALIGN_OPTIONS
    },
    textAlignment: {
        title: 'uieditor.sfbComponent.productGroup.textAlignment.label',
        type: DROPDOWN,
        defaultValue: ALIGN_OPTIONS[1].value,
        options: ALIGN_OPTIONS
    },
    buttonAlignment: {
        title: 'uieditor.sfbComponent.productGroup.buttonAlignment.label',
        type: DROPDOWN,
        defaultValue: ALIGN_OPTIONS[1].value,
        options: ALIGN_OPTIONS
    },
    buttonType: {
        title: 'uieditor.sfbComponent.productGroup.buttonType.title',
        type: RADIO,
        defaultValue: BUTTON_TYPES[0].value,
        options: BUTTON_TYPES
    },
    displayBorder: {
        label: 'uieditor.sfbComponent.productGroup.displayBorder.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    onHoverBorderOnly: {
        label: 'uieditor.sfbComponent.productGroup.onHoverBorderOnly.label',
        defaultValue: false,
        type: TOGGLE_CHECK,
        marginSize: 20,
        conditionalAttributes: {
            isVisible: {
                when: 'displayBorder',
                connector: 'equals',
                value: true
            }
        }
    },
    displayShadow: {
        label: 'uieditor.sfbComponent.productGroup.displayShadow.label',
        defaultValue: true,
        type: TOGGLE_CHECK,
        marginSize: 10
    },
    onHoverShadowOnly: {
        label: 'uieditor.sfbComponent.productGroup.onHoverShadowOnly.label',
        defaultValue: false,
        type: TOGGLE_CHECK,
        marginSize: 20,
        conditionalAttributes: {
            isVisible: {
                when: 'displayShadow',
                connector: 'equals',
                value: true
            }
        }
    },
    imageCornerRadius: {
        title: 'uieditor.sfbComponent.productGroup.imageCornerRadius.title',
        type: SLIDER,
        defaultValue: 0,
        options: {
            range: true,
            min: 0,
            max: 100,
            step: 1
        }
    },
    cardCornerRadius: {
        title: 'uieditor.sfbComponent.productGroup.cardCornerRadius.title',
        type: SLIDER,
        defaultValue: 0,
        options: {
            range: true,
            min: 0,
            max: 100,
            step: 1
        }
    }
};

ProductGroup.schema = () => ({
    name: 'ProductGroup',
    title: 'uieditor.sfbComponent.productGroup.title',
    iconName: 'productGroups',
    componentTitleKey: 'productGroupTabTitle',
    orderableSection: [
        // NAMESPACES.home
    ],
    form: productGroupForm
});

ProductGroup.propTypes = {
    settings: PropTypes.shape({
        style: PropTypes.string,
        rowGap: PropTypes.number,
        columnGap: PropTypes.number,
        contentAlignment: PropTypes.string,
        headerTextAlignment: PropTypes.string,
        displayHeaderTitle: PropTypes.bool,
        displayHeaderDescription: PropTypes.bool,
        size: PropTypes.string,
        headerTitle: PropTypes.string,
        headerDescription: PropTypes.string,
        imageBackgroundColor: PropTypes.string,
        displayUpperTitle: PropTypes.bool,
        upperTitleAlignment: PropTypes.string,
        buttonAlignment: PropTypes.string,
        textAlignment: PropTypes.string,
        displayTitle: PropTypes.bool,
        displayDescription: PropTypes.bool,
        cardBackgroundColor: PropTypes.string,
        displayButton: PropTypes.bool,
        buttonType: PropTypes.string,
        cardCornerRadius: PropTypes.string,
        imageCornerRadius: PropTypes.string,
        cardBorderColor: PropTypes.string,
        displayShadow: PropTypes.bool,
        displayBorder: PropTypes.bool,
        onHoverShadowOnly: PropTypes.bool,
        onHoverBorderOnly: PropTypes.bool,
        upperTitleColor: PropTypes.string,
        titleColor: PropTypes.string,
        descriptionColor: PropTypes.string,
        shadowColor: PropTypes.string,
        containerBackgroundColor: PropTypes.string,
        productGroupList: PropTypes.array
    }),
    data: PropTypes.object,
    defaultValues: PropTypes.object
};

ProductGroup.defaultProps = {
    settings: {},
    data: {},
    defaultValues: {}
};

export default withListener(ProductGroup);
