import React from 'react';
import PropTypes from 'prop-types';

import { lighten, darken } from '../../tools/colorHelper';
import { createNamespace } from '../../tools/namingTools';
import { BUTTON_THEMES as buttonThemes, THEME_PRIMARY } from '../../constants/buttons';

import FormLabel from '../form-label/FormLabel';
import ButtonIcon from '../button-icon/ButtonIcon';
import { allowedTypes as iconTypes } from '../icon/Icon';

import './styles/InputSearch.scss';

const n = createNamespace('InputSearch');

const InputSearch = ({
    name,
    label,
    required,
    placeholder,
    defaultValue,
    hiddenLabel,
    inputRef,
    inputClass,
    submitLabel,
    submitIcon,
    submitIconUrl,
    submitIconColor,
    submitIconOnly,
    submitTextOnly,
    submitColorTheme,
    submitBgColor,
    withBorder,
    borderRadius,
    backgroundColor,
    borderColor,
    height,
    boxShadow,
    onChange
}) => {
    const componentVariables = {
        'input-bg-color': backgroundColor,
        'input-border-width': withBorder ? '1px' : '0',
        'input-border-radius': borderRadius && `${borderRadius}px`,
        'input-border-color': borderColor,
        'input-border-focus-color': borderColor && darken(borderColor, 0.25),
        'input-height': height && `${height}px`,
        'submit-bg-color': submitBgColor,
        'submit-bg-hover-color': submitBgColor && lighten(submitBgColor, 0.08),
        'submit-icon-color': submitIconColor
    };

    const controlModifiers = [
        submitLabel && 'with-button',
        !boxShadow && 'no-box-shadow'
    ];

    const labelModifiers = [
        hiddenLabel && 'hidden'
    ];

    const submitModifiers = [
        submitBgColor && 'custom-bg-color',
        borderColor && 'input-border-color'
    ];

    const renderSubmitbutton = (
        <ButtonIcon
            {...n('submitBtn', submitModifiers).props}
            size="input"
            theme={submitBgColor ? null : submitColorTheme}
            action="submit"
            icon={!submitTextOnly && !submitIconUrl ? submitIcon : null}
            iconSrc={submitIconUrl}
            iconClass={n('submitIcon').props.className}
            hiddenText={submitIconOnly}
        >
            {submitLabel}
        </ButtonIcon>
    );

    const renderInput = (
        <input
            {...n('control', controlModifiers).withTestId().withClass(inputClass).props}
            id={name}
            type="search"
            name={name}
            ref={inputRef}
            placeholder={placeholder}
            defaultValue={defaultValue}
            required={required}
            onChange={onChange}
        />
    );

    return (
        <div {...n('wrapper').withTestId().withVariables(componentVariables).props}>
            <FormLabel
                labelText={label}
                htmlFor={name}
                labelProps={n('label', labelModifiers).props}
            />
            <div {...n('input').withTestId().props}>
                {renderInput}
                {submitLabel && (
                    <div {...n('submitWrapper').withTestId().props}>
                        {renderSubmitbutton}
                    </div>
                )}
            </div>
        </div>
    );
};

InputSearch.propTypes = {
    name: PropTypes.string,
    label: PropTypes.string,
    required: PropTypes.bool,
    placeholder: PropTypes.string,
    defaultValue: PropTypes.string,
    inputRef: PropTypes.func,
    inputClass: PropTypes.string,
    submitLabel: PropTypes.string,
    submitIcon: PropTypes.oneOf(iconTypes),
    submitIconOnly: PropTypes.bool,
    submitTextOnly: PropTypes.bool,
    submitIconUrl: PropTypes.string,
    submitIconColor: PropTypes.string,
    submitColorTheme: PropTypes.oneOf(buttonThemes),
    submitBgColor: PropTypes.string,
    hiddenLabel: PropTypes.bool,
    withBorder: PropTypes.bool,
    borderRadius: PropTypes.number,
    backgroundColor: PropTypes.string,
    borderColor: PropTypes.string,
    height: PropTypes.number,
    boxShadow: PropTypes.bool,
    onChange: PropTypes.func
};

InputSearch.defaultProps = {
    name: 'inputSearch',
    label: 'Search',
    required: true,
    placeholder: null,
    defaultValue: '',
    inputRef: null,
    inputClass: null,
    submitLabel: null,
    submitIcon: 'search',
    submitIconOnly: false,
    submitTextOnly: false,
    submitIconUrl: null,
    submitIconColor: null,
    submitColorTheme: THEME_PRIMARY,
    submitBgColor: null,
    hiddenLabel: false,
    withBorder: true,
    borderRadius: null,
    backgroundColor: null,
    borderColor: null,
    height: null,
    boxShadow: true,
    onChange: () => {}
};

export default InputSearch;
