import React from 'react';
import PropTypes from 'prop-types';
import './styles/SearchBar.scss';
import Icon from '../icon/Icon';
import { TEXTAREA, COLORPICKER, SLIDER, TOGGLE } from '../../constants/schemaComponentTypes';
import { createNamespace } from '../../tools/namingTools';

const n = createNamespace('searchBar');

const SearchBar = ({
    settings: {
        buttonColor,
        backgroundColor,
        borderColor,
        placeHolder,
        borderVisible,
        cornerRadius
    }
}) => {
    const borderStyle = Object.assign(
        { borderRadius: `${cornerRadius}px` },
        borderVisible && { border: `1px solid ${borderColor}` }
    );
    return (
        <div {...n('container').props}>
            <div {...n('border').withTestId().props} style={borderStyle}>
                <div {...n('column', 'left').props}>
                    <input
                        {...n('inputBar').withTestId().props}
                        style={{ backgroundColor }}
                        placeholder={placeHolder}
                        type="text"
                    />
                </div>
                <div {...n('column', 'right').props}>
                    <button
                        {...n('button').withTestId().props}
                        style={{ backgroundColor: buttonColor }}
                        type="submit"
                    >
                        <Icon {...n('icon').props} fill="white" type="search" />
                    </button>
                </div>
            </div>
        </div>
    );
};

SearchBar.schema = () => ({
    name: 'Search Bar',
    iconName: 'carousel',
    form: {
        buttonColor: {
            title: 'uieditor.sfbComponent.searchBar.buttonColor.title',
            defaultValue: '#009DDB',
            type: COLORPICKER
        },
        backgroundColor: {
            title: 'uieditor.sfbComponent.searchBar.backgroundColor.title',
            defaultValue: '#ffff',
            type: COLORPICKER
        },
        borderColor: {
            title: 'uieditor.sfbComponent.searchBar.borderColor.title',
            defaultValue: '#CBCBCB',
            type: COLORPICKER
        },
        placeHolder: {
            title: 'uieditor.sfbComponent.searchBar.placeHolder.title',
            defaultValue: 'uieditor.sfbComponent.searchBar.placeHolder.defaultValue',
            type: TEXTAREA,
            required: true,
            validation: {
                pattern: /^[a-zA-Z0-9 ]+$/gm,
                message: 'uieditor.sfbComponent.input.validation.message'
            }
        },
        borderVisible: {
            labelOn: 'uieditor.sfbComponent.searchBar.borderVisible.labelOn',
            labelOff: 'uieditor.sfbComponent.searchBar.borderVisible.labelOff',
            defaultValue: false,
            type: TOGGLE
        },
        cornerRadius: {
            title: 'uieditor.sfbComponent.searchBar.cornerRadius.title',
            type: SLIDER,
            required: false,
            defaultValue: 3,
            options: {
                step: 1,
                min: 1,
                max: 24
            }
        }
    }
});

const SETTINGS = SearchBar.schema().form;

SearchBar.propTypes = {
    settings: PropTypes.shape({
        buttonColor: PropTypes.string,
        backgroundColor: PropTypes.string,
        borderColor: PropTypes.string,
        placeHolder: PropTypes.string,
        cornerRadius: PropTypes.number,
        borderVisible: PropTypes.bool
    })
};

SearchBar.defaultProps = {
    settings: {
        buttonColor: SETTINGS.buttonColor.defaultValue,
        backgroundColor: SETTINGS.backgroundColor.defaultValue,
        borderColor: SETTINGS.borderColor.defaultValue,
        placeHolder: SETTINGS.placeHolder.defaultValue,
        cornerRadius: SETTINGS.cornerRadius.defaultValue,
        borderVisible: SETTINGS.borderVisible.defaultValue
    }
};

export default SearchBar;
