import React from 'react';
import PropTypes from 'prop-types';
import Button from '../../button/Button';
import Icon from '../../icon/Icon';
import Image from '../../image/Image';
import SearchBarV2 from '../../search-bar-v2/SearchBarV2';
import { createNamespace } from '../../../tools/namingTools';
import { getListingUrl, navigateTo } from '../../../tools/urlTools';
import { useResponsive } from '../../../tools/widths/useResponsive';
import { HERO_STYLE_HEIGHTS, HERO_STYLE_HEIGHTS_MOBILE, SEARCH_BAR_HEIGHTS_VALUES,
    SEARCH_BAR_WIDTH } from '../../../constants/atoms/hero-banner-styles';
import { SCALE_TO_FIT_SCREEN } from '../../../constants/components/hero-banner';
import { MEDIUM, SMALL } from '../../../constants/sizes';
import { SIZE_DEFAULT } from '../../../constants/buttons';
import { PRIMARY, LINK } from '../../../constants/components/schemas/button-types';
import { heroStylePropTypes } from '../../../constants/components/prop-types/hero-banner';
import { headerDataStore as dataStore } from '../../../store/header';
// IMPORTANT: (s)css should be imported after other atoms/components
import './styles/HeroStyle.scss';

const n = createNamespace('HeroStyle');

const HeroStyle = ({
    settings,
    i18n,
    locale
}) => {
    const { mediumDown: isMobile } = useResponsive();
    const sizesToUse = isMobile ? HERO_STYLE_HEIGHTS_MOBILE : HERO_STYLE_HEIGHTS;

    const {
        height,
        isTaglineVisible,
        isTitleVisible,
        isTextVisible,
        isButton1Visible,
        isButton2Visible,
        isSearchBarVisible,
        tagline,
        title,
        text,
        button1Label,
        button2Label,
        backgroundImage,
        imageSize,
        taglineColor,
        titleColor,
        descriptionColor,
        overlayColor,
        backgroundColor,
        shadowColor,
        textAlignment,
        textPosition,
        textSize,
        button1Type,
        button1Link,
        button2Type,
        button2Link,
        searchBarWidth,
        searchCornerRadius,
        searchPlaceholder,
        searchPlaceholderTextColor,
        searchIcon,
        searchBorderColor,
        searchBackgroundColor,
        searchButtonColor,
        searchIconColor
    } = settings;

    const { searchValue, setSearchValue } = dataStore();

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

    const searchBarSettings = {
        searchValue,
        inputName: 'inputSearch',
        onSearch,
        height: SEARCH_BAR_HEIGHTS_VALUES[MEDIUM.value],
        hiddenLabel: true,
        label: i18n?.search,
        searchBackgroundColor,
        searchBorderColor,
        searchCornerRadius,
        searchBorderVisible: true,
        submitIconOnly: true,
        searchIcon,
        searchIconColor,
        searchButtonColor,
        searchPlaceholder: searchPlaceholder || i18n?.search,
        searchPlaceholderTextColor,
        searchBarMinWidth: SEARCH_BAR_WIDTH.min,
        searchBarMaxWidth: searchBarWidth,
        hasBoxShadow: false
    };

    const hasBackgroundImage = Boolean(backgroundImage?.url);

    // on mobile, always screen-width
    const backgroundImageModifiers = [
        imageSize && (isMobile ? SCALE_TO_FIT_SCREEN.value : imageSize)
    ];

    const componentVariables = {
        'tagline-color': taglineColor,
        'title-color': titleColor,
        'description-color': descriptionColor,
        'background-color': backgroundColor,
        'image-url': hasBackgroundImage && `url("${backgroundImage?.url}")`,
        'overlay-color': overlayColor,
        'shadow-color': shadowColor,
        height: `${sizesToUse[height]}px`
    };

    const handleButton1Click = () => button1Link && navigateTo(button1Link);
    const handleButton2Click = () => button2Link && navigateTo(button2Link);

    const buttonSize = textSize === SMALL.value ? SMALL.value : SIZE_DEFAULT;

    // <img> element should be high priority to improve LCP
    const imageAttributes = {
        fetchpriority: 'high'
    };

    const wrapperModifiers = [
        height && `height-${height}`,
        textPosition && `position-${textPosition}`
    ];

    const contentModifiers = [
        height && `height-${height}`,
        textAlignment && `align-${textAlignment}`
    ];

    const textModifiers = [
        textSize && `text-size-${textSize}`
    ];

    return (
        <div {...n('wrapper', wrapperModifiers).withTestId().withE2EId().withVariables(componentVariables).props}>
            {
                backgroundImage?.url && (
                    <>
                        <Image
                            {...imageAttributes}
                            {...n('backgroundImage', backgroundImageModifiers).props}
                            src={backgroundImage?.url}
                            alt={backgroundImage?.alt}
                        />
                        <div {...n('backgroundImageOverlay', backgroundImageModifiers).withTestId().props} />
                    </>

                )
            }
            <div {...n('content', contentModifiers).withTestId().withE2EId().props}>
                {
                    isTaglineVisible && (
                        <div {...n('tagline', textModifiers).withTestId().withE2EId().props}>
                            {tagline}
                        </div>
                    )
                }
                {
                    isTitleVisible && (
                        <div {...n('title', textModifiers).withTestId().withE2EId().props}>
                            {title}
                        </div>
                    )
                }
                {
                    isTextVisible && (
                        <div {...n('text', textModifiers).withTestId().withE2EId().props}>
                            {text}
                        </div>
                    )
                }
                <div {...n('buttonContainer').props}>
                    {isButton1Visible && (
                        <div {...n('button').withTestId().withE2EId().props}>
                            <Button
                                size={buttonSize}
                                type={button1Type !== LINK.value ? button1Type : PRIMARY.value}
                                buttonType={button1Type !== LINK.value ? 'button' : LINK.value}
                                onClick={handleButton1Click}
                                tabIndex={0}
                            >
                                {button1Label || i18n?.learnMore}
                                { button1Type === LINK.value && <Icon type="caretRight" {...n('iconLink').props} /> }
                            </Button>
                        </div>
                    )}
                    {
                        isButton2Visible && (
                            <div {...n('button').withTestId().withE2EId().props}>
                                <Button
                                    size={buttonSize}
                                    type={button2Type !== LINK.value ? button2Type : PRIMARY.value}
                                    buttonType={button2Type !== LINK.value ? 'button' : LINK.value}
                                    onClick={handleButton2Click}
                                    tabIndex={0}
                                >
                                    {button2Label || i18n?.learnMore}
                                    { button2Type === LINK.value && <Icon type="caretRight" {...n('iconLink').props} /> }
                                </Button>
                            </div>
                        )
                    }
                </div>
                {
                    isButton1Visible && isSearchBarVisible
                    && <div {...n('divider').props} />
                }
                {
                    isSearchBarVisible && (
                        <SearchBarV2 {...searchBarSettings} />
                    )
                }
            </div>
        </div>
    );
};

HeroStyle.propTypes = {
    i18n: PropTypes.object,
    locale: PropTypes.string,
    settings: PropTypes.shape(heroStylePropTypes)
};

HeroStyle.defaultProps = {
    i18n: {
        learnMore: 'Learn more',
        search: 'Search'
    },
    locale: 'en-US',
    settings: {}
};

export default HeroStyle;
