import React from 'react';
import PropTypes from 'prop-types';
import { TEXTAREA, COLORPICKER, SLIDER, TOGGLE } from '../../constants/schemaComponentTypes';
import { SPECIAL_CHARACTERS_BLOCKLIST } from '../../constants/regexConstants';
import { createNamespace } from '../../tools/namingTools';
import { lighten } from '../../tools/colorHelper';
import FormLabel from '../form-label/FormLabel';
import ButtonIcon from '../button-icon/ButtonIcon';
import './styles/SearchBar.scss';

const n = createNamespace('searchBar');

const SearchBar = ({
    label,
    required,
    name,
    submitText,
    settings: {
        buttonColor,
        backgroundColor,
        borderColor,
        placeHolder,
        borderVisible,
        cornerRadius
    }
}) => {
    const borderStyle = {
        borderRadius: `${cornerRadius}px`,
        ...borderVisible && { border: `1px solid ${borderColor}` }
    };

    const componentVariables = {
        'button-bg-color': buttonColor,
        'button-bg-hover-color': buttonColor && lighten(buttonColor, 0.08)
    };

    return (
        <div {...n('container').withTestId().withVariables(componentVariables).props}>
            <div {...n('border').withTestId().props} style={borderStyle}>
                <div {...n('column', 'left').props}>
                    <FormLabel
                        labelText={label}
                        required={required}
                        htmlFor={name}
                        hiddenText
                    >
                        <input
                            {...n('inputBar').withTestId().props}
                            name={name}
                            id={name}
                            style={{ backgroundColor }}
                            placeholder={placeHolder}
                            type="text"
                        />
                    </FormLabel>
                </div>
                <div {...n('column', 'right').props}>
                    <ButtonIcon
                        {...n('button', buttonColor && 'custom-bg-color').withTestId().props}
                        icon="search"
                        theme={buttonColor ? null : 'primary'}
                        iconClass={n('icon').props.className}
                        action="submit"
                        hiddenText
                    >
                        {submitText}
                    </ButtonIcon>
                </div>
            </div>
        </div>
    );
};

SearchBar.schema = () => ({
    name: 'Search Bar',
    iconName: 'carousel',
    form: {
        buttonColor: {
            title: 'uieditor.sfbComponent.searchBar.buttonColor.title',
            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: SPECIAL_CHARACTERS_BLOCKLIST,
                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 = {
    label: PropTypes.string,
    required: PropTypes.bool,
    name: PropTypes.string,
    submitText: PropTypes.string,
    settings: PropTypes.shape({
        buttonColor: PropTypes.string,
        backgroundColor: PropTypes.string,
        borderColor: PropTypes.string,
        placeHolder: PropTypes.string,
        cornerRadius: PropTypes.number,
        borderVisible: PropTypes.bool
    })
};

SearchBar.defaultProps = {
    label: 'Search',
    required: false,
    name: 'searchBar',
    submitText: 'Submit',
    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;
