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 { ALIGNMENT_OPTIONS, linkCardShape } from '../../constants/components/link-section';
import { LinkCard } from '../../atoms/link-card/LinkCard';
import { COLORPICKER, SLIDER, RADIO } from '../../constants/schemaComponentTypes';
import { createNamespace } from '../../tools/namingTools';

const n = createNamespace('linkSection');

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

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

    return (
        <div {...n('mainContainer').withTestId().props}>
            <div {...n('breadCrumbContainer').props} key="breadcrumb">
                <Breadcrumbs baseIconName="homeNav" baseLinkUrl="#" />
            </div>
            <div {...n('wrapper').props} key="wrapper">
                {items.map(renderCard)}
            </div>
            <div {...n('searchBarContainer').props} key="searchbar">
                <SearchBar />
            </div>
        </div>
    );
};

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
        },
        tileColor: {
            title: 'uieditor.sfbComponent.linkSection.tileColor.title',
            defaultValue: '#FFFFF',
            type: COLORPICKER
        },
        imageColor: {
            title: 'uieditor.sfbComponent.linkSection.imageColor.title',
            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 = {
    data: PropTypes.shape({
        items: PropTypes.arrayOf(PropTypes.shape(linkCardShape))
    }),
    settings: PropTypes.shape({
        imageColor: PropTypes.string,
        alignment: PropTypes.oneOf(ALIGNMENT_OPTIONS.map(({ value }) => value)),
        tileColor: PropTypes.string,
        cornerRadius: PropTypes.number
    })
};

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

export default LinkSection;
