import React from 'react';
import PropTypes from 'prop-types';
import './styles/LinkSection.scss';
import Breadcrumbs from '../../atoms/bread-crumbs/BreadCrumbs';
import SearchBar from '../../atoms/search-bar/SearchBar';
import { LinkCard } from '../../atoms/link-card/LinkCard';
import { COLORPICKER, SLIDER, RADIO } from '../../constants/schemaComponentTypes';
import { createNamespace } from '../../tools/namingTools';
import { CENTER, LEFT, RIGHT } from '../../constants/alignment';

const n = createNamespace('linkSection');
const availableCardIcons = ['user', 'payment', 'productTile'];

const LinkSection = ({
    settings: {
        imageColor,
        cornerRadius,
        alignment,
        tileColor
    }
}) => {
    const linkCardProps = {
        cornerRadius: `${cornerRadius}px`,
        imageColor,
        alignment,
        tileColor
    };

    const renderCard = item => (
        <div {...n('column').props} key={item}>
            <LinkCard linkCardProps={linkCardProps} iconType={item} />
        </div>
    );

    return (
        <div {...n('mainContainer').withTestId().props}>
            <div {...n('breadCrumbContainer').props} key="breadcrumb">
                <Breadcrumbs activeColor="black" inactiveColor="gray" baseIconName="homeNav" baseLink="#" />
            </div>
            <div {...n('wrapper').props} key="wrapper">
                {availableCardIcons.map(renderCard)}
            </div>
            <div {...n('searchBarContainer').props} key="searchbar">
                <SearchBar />
            </div>
        </div>
    );
};

const ALIGNMENT_OPTIONS = [LEFT, CENTER, RIGHT];

LinkSection.schema = () => ({
    name: 'LinkSection',
    title: 'uieditor.sfbComponent.linkSection.title',
    iconName: 'carousel',
    form: {
        alignment: {
            title: 'uieditor.sfbComponent.linkSection.alignment.title',
            type: RADIO,
            defaultValue: ALIGNMENT_OPTIONS[0].value,
            options: ALIGNMENT_OPTIONS,
            validation: {
                availableOptions: ALIGNMENT_OPTIONS.map(({ value }) => value),
                default: 'uieditor.sfbComponent.dropdown.defaultValue'
            }
        },
        tileColor: {
            title: 'uieditor.sfbComponent.linkSection.tileColor.title',
            defaultValue: '#FFFFF',
            type: COLORPICKER
        },
        imageColor: {
            title: 'uieditor.sfbComponent.linkSection.imageColor.title',
            defaultValue: '#009DDB',
            type: COLORPICKER
        },
        cornerRadius: {
            title: 'uieditor.sfbComponent.linkSection.cornerRadius.title',
            type: SLIDER,
            required: false,
            defaultValue: 8,
            options: {
                step: 0.5,
                min: 5,
                max: 30
            }
        }
    }
});

const SETTINGS = LinkSection.schema().form;

LinkSection.propTypes = {
    settings: PropTypes.shape({
        imageColor: PropTypes.string,
        alignment: PropTypes.string,
        tileColor: PropTypes.string,
        cornerRadius: PropTypes.number
    })
};

LinkSection.defaultProps = {
    settings: {
        imageColor: SETTINGS.imageColor.defaultValue,
        tileColor: SETTINGS.tileColor.defaultValue,
        cornerRadius: SETTINGS.cornerRadius.defaultValue,
        alignment: SETTINGS.alignment.defaultValue
    }
};

export default LinkSection;
