import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useForm } from 'react-hook-form';
import { createNamespace } from '../../../../../tools/namingTools';

import { SEARCH_BAR_HEIGHTS_VALUES, SEARCH_BAR_WIDTH, SEARCH_BAR_IN_HOME_BAR } from '../../../../../constants/components/header';
import { headerSearchBarSchemaForm } from '../../../../../constants/components/schemas/header';
import { headerSearchBarPropTypes, headerSearchBarDataShape } from '../../../../../constants/components/prop-types/header';
import { MEDIUM } from '../../../../../constants/sizes';
import withListener from '../../../../withListener';

import InputSearch from '../../../../../atoms/input-search/InputSearch';
import { getListingUrl, navigateTo } from '../../../../../tools/urlTools';
import { headerDataStore } from '../../../../../store/header';
import { configMock } from '../../../../../../mocks/config';

import './styles/HeaderSearchBar.scss';

const n = createNamespace('HeaderSearchBar');

const HeaderSearchBar = ({ data, settings }) => {
    const {
        label,
        i18n,
        searchBackgroundColor,
        searchBorderColor,
        searchCornerRadius,
        searchBorderVisible,
        searchIconColor,
        searchButtonColor,
        searchIcon,
        searchPlaceholder,
        searchBarMaxWidth,
        searchBarHeight,
        ...otherProps
    } = settings;
    const { query, locale } = data;
    const { searchValue, setSearchValue } = headerDataStore();
    const { handleSubmit, register } = useForm();
    const i18nWithDefaults = { ...HeaderSearchBar.defaultProps.settings.i18n, ...i18n };
    const {
        className: extraClass,
        'data-testid': parentTestId
    } = otherProps;
    const styleVariables = {
        'min-width': `${SEARCH_BAR_WIDTH.min}px`,
        'max-width': searchBarMaxWidth && `${searchBarMaxWidth}px`
    };
    const height = SEARCH_BAR_HEIGHTS_VALUES[searchBarHeight];

    useEffect(() => {
        query && setSearchValue(query.q);
    }, [query, setSearchValue]);

    const onSearch = (formData, e) => {
        e.preventDefault();
        setSearchValue(formData.domain);
        navigateTo(getListingUrl(locale.code, formData.domain));
    };

    return (
        <div {...n('wrapper')
            .withVariables(styleVariables)
            .withClass(extraClass)
            .withTestId(parentTestId)
            .props}
        >
            <form {...n('form').props} onSubmit={handleSubmit(onSearch)} noValidate>
                <InputSearch
                    name="domain"
                    label={label}
                    placeholder={searchPlaceholder}
                    hiddenLabel
                    withBorder={searchBorderVisible}
                    borderRadius={searchCornerRadius}
                    borderColor={searchBorderColor}
                    backgroundColor={searchBackgroundColor}
                    inputRef={register({})}
                    submitIconOnly
                    submitIconColor={searchIconColor}
                    submitIconUrl={searchIcon && searchIcon.url}
                    submitBgColor={searchButtonColor}
                    submitLabel={i18nWithDefaults.submit}
                    height={height}
                    boxShadow={false}
                    defaultValue={searchValue}
                />
            </form>
        </div>
    );
};

HeaderSearchBar.schema = () => ({
    name: 'Header Search Bar',
    title: 'uieditor.sfbComponent.header.searchBar.title',
    iconName: 'search',
    form: headerSearchBarSchemaForm
});

HeaderSearchBar.propTypes = {
    data: PropTypes.shape(headerSearchBarDataShape),
    settings: PropTypes.shape(headerSearchBarPropTypes)
};

HeaderSearchBar.defaultProps = {
    data: {
        config: configMock
    },
    settings: {
        label: 'Search',
        placeholder: 'Search',
        searchBarMaxWidth: null,
        searchBorderVisible: true,
        searchCornerRadius: null,
        searchBackgroundColor: null,
        searchBorderColor: null,
        searchIcon: null,
        searchIconColor: null,
        searchButtonColor: null,
        searchBarHeight: MEDIUM.value,
        searchBarLocation: SEARCH_BAR_IN_HOME_BAR.value,
        i18n: {
            submit: 'Search'
        }
    }
};

export default withListener(HeaderSearchBar);
