import mergeToNew from "@insite/client-framework/Common/mergeToNew";
import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import translate from "@insite/client-framework/Translate";
import { AutocompleteItemModel, BrandAutocompleteModel } from "@insite/client-framework/Types/ApiModels";
import Link, { LinkPresentationProps } from "@insite/mobius/Link";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import React, { Fragment } from "react";
import { connect, ResolveThunks } from "react-redux";
import styled, { css } from "styled-components";
import setIsSearchPage from "@insite/client-framework/Store/Pages/ProductList/Handlers/SetIsSearchPage";

interface OwnProps {
    brands: BrandAutocompleteModel[] | null;
    popularBrands?: BrandAutocompleteModel[] | null;
    focusedItem?: AutocompleteItemModel;
    goToUrl: (url: string) => void;
    extendedStyles?: AutocompleteBrandsStyles;
    isRetailSearchCompletionResults?: boolean;
}

type Props = OwnProps & ResolveThunks<typeof mapDispatchToProps>;

const mapDispatchToProps = {
    setIsSearchPage,
};

export interface AutocompleteBrandsStyles {
    headerText?: TypographyPresentationProps;
    subHeaderText?: TypographyPresentationProps;
    brandItemText?: TypographyPresentationProps;
    divider?: InjectableCss;
    focusedBrandItemText?: TypographyPresentationProps;
    link?: LinkPresentationProps;
    focusedLink?: LinkPresentationProps;
    autocompleteBrandsRowWrapper?: InjectableCss;
    autocompleteBrandsColumnWrapper?: InjectableCss;
}

export const autocompleteBrandsStyles: AutocompleteBrandsStyles = {
    headerText: {
        weight: "bold",
        css: css`
            text-align: left;
            margin: 10px 0 5px 0;
        `,
    },
    subHeaderText: {
        weight: 600,
        css: css`
            text-align: left;
            margin: 0 0 5px 0;
        `,
    },
    brandItemText: {
        ellipsis: true,
        css: css`
            width: 100%;
            text-align: left;
            cursor: pointer;
        `,
    },
    divider: {
        css: css`
            min-width: 100%;
        `,
    },
    focusedBrandItemText: {
        ellipsis: true,
        css: css`
            width: 100%;
            text-align: left;
            cursor: pointer;
            background-color: lightgray;
        `,
    },
    link: {
        typographyProps: {
            ellipsis: true,
            css: css`
                width: 100%;
                text-align: left;
                margin: 5px 0;
            `,
        },
        css: css`
            width: auto;
            overflow: hidden;
        `,
    },
    focusedLink: {
        typographyProps: {
            ellipsis: true,
            css: css`
                width: 100%;
                text-align: left;
                margin: 5px 0;
            `,
        },
        css: css`
            width: auto;
            overflow: hidden;
            background-color: lightgray;
        `,
    },
    autocompleteBrandsRowWrapper: {
        css: css`
            display: flex;
            flex-direction: row;
        `,
    },
    autocompleteBrandsColumnWrapper: {
        css: css`
            display: flex;
            flex-direction: column;
            width: 375px;
        `,
    },
};

const styles = autocompleteBrandsStyles;

const Divider = styled.hr`
    ${styles.divider?.css}
`;

class AutocompleteBrands extends React.Component<Props> {
    private readonly styles: AutocompleteBrandsStyles;

    constructor(props: Props) {
        super(props);

        this.styles = mergeToNew(styles, props.extendedStyles);
    }

    renderBrands = (brands: BrandAutocompleteModel[]) => {
        const styles = this.styles;
        return (
            <>
                {brands.map(brand => (
                    <Fragment key={`${brand.id}_${brand.productLineId}`}>
                        {brand.productLineName && (
                            <Typography
                                {...(this.props.focusedItem === brand
                                    ? styles.focusedBrandItemText
                                    : styles.brandItemText)}
                                onClick={() => {
                                    this.props.setIsSearchPage(false);
                                    this.props.goToUrl(brand.url);
                                }}
                                data-test-selector={`productLineId_${brand.productLineId}`}
                                className="autocomplete-brands-item-text"
                            >
                                <Link {...styles.link} className="autocomplete-brands-item-link">
                                    {brand.displayProductLineName}
                                </Link>
                                <>{` ${translate("in")}`}</> {brand.displayTitle}
                            </Typography>
                        )}
                        {!brand.productLineName && (
                            <Link
                                {...(this.props.focusedItem === brand ? styles.focusedLink : styles.link)}
                                onClick={() => {
                                    this.props.setIsSearchPage(false);
                                    this.props.goToUrl(brand.url);
                                }}
                                data-test-selector={`brandId_${brand.id}`}
                                className="autocomplete-brands-link"
                            >
                                {brand.displayTitle}
                            </Link>
                        )}
                    </Fragment>
                ))}
            </>
        );
    };

    render() {
        const { brands, popularBrands, isRetailSearchCompletionResults } = this.props;
        if ((!brands || brands.length === 0) && (!popularBrands || popularBrands.length === 0)) {
            return null;
        }

        const styles = this.styles;
        return (
            <>
                <Typography
                    {...styles.headerText}
                    data-test-selector="autocompleteBrands_Header"
                    className="autocomplete-brands-header"
                >
                    {translate("Brands")}
                </Typography>

                {brands && brands.length > 0 && !isRetailSearchCompletionResults && this.renderBrands(brands)}

                {isRetailSearchCompletionResults && (
                    <>
                        <Divider />
                        <StyledWrapper
                            {...this.styles.autocompleteBrandsRowWrapper}
                            className="autocomplete-brands-row-wrapper"
                        >
                            {popularBrands && popularBrands.length > 0 && (
                                <StyledWrapper
                                    {...this.styles.autocompleteBrandsColumnWrapper}
                                    className="autocomplete-brands-column-wrapper"
                                >
                                    <Typography
                                        {...styles.subHeaderText}
                                        data-test-selector="autocompleteBrands_subHeader"
                                        className="autocomplete-brands-subheader"
                                    >
                                        {translate("popular")}
                                    </Typography>
                                    {this.renderBrands(popularBrands)}
                                </StyledWrapper>
                            )}
                            {brands && brands.length > 0 && (
                                <StyledWrapper
                                    {...this.styles.autocompleteBrandsColumnWrapper}
                                    className="autocomplete-brands-column-wrapper"
                                >
                                    <Typography
                                        {...styles.subHeaderText}
                                        data-test-selector="autocompleteBrands_subHeader"
                                        className="autocomplete-brands-subheader"
                                    >
                                        {translate("suggested")}
                                    </Typography>
                                    {this.renderBrands(brands)}
                                </StyledWrapper>
                            )}
                        </StyledWrapper>
                    </>
                )}
            </>
        );
    }
}

export default connect(null, mapDispatchToProps)(AutocompleteBrands);
