import mergeToNew from "@insite/client-framework/Common/mergeToNew";
import translate from "@insite/client-framework/Translate";
import { AutocompleteItemModel } 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 from "react";
import styled, { css } from "styled-components";

interface Props {
    suggestions: AutocompleteItemModel[] | null;
    focusedItem?: AutocompleteItemModel;
    goToUrl: (url: string) => void;
    extendedStyles?: AutocompleteSuggestionsStyles;
}

export interface AutocompleteSuggestionsStyles {
    headerText?: TypographyPresentationProps;
    divider?: InjectableCss;
    link?: LinkPresentationProps;
    focusedLink?: LinkPresentationProps;
}

export const autocompleteSuggestionStyles: AutocompleteSuggestionsStyles = {
    headerText: {
        weight: "bold",
        css: css`
            text-align: left;
            margin: 10px 0 5px 0;
        `,
    },
    divider: {
        css: css`
            min-width: 100%;
        `,
    },
    link: {
        typographyProps: {
            ellipsis: true,
            css: css`
                width: 100%;
                text-align: left;
                margin: 5px 0;
            `,
        },
        css: css`
            width: 100%;
            overflow: hidden;
        `,
    },
    focusedLink: {
        typographyProps: {
            ellipsis: true,
            css: css`
                width: 100%;
                text-align: left;
                margin: 5px 0;
            `,
        },
        css: css`
            width: 100%;
            overflow: hidden;
            background-color: lightgray;
        `,
    },
};

const styles = autocompleteSuggestionStyles;

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

class AutocompleteSuggestions extends React.Component<Props> {
    private readonly styles: AutocompleteSuggestionsStyles;

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

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

    render() {
        const { suggestions } = this.props;
        if (!suggestions || suggestions.length === 0) {
            return null;
        }

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

                <Divider />

                {suggestions.map(suggestion => (
                    <Link
                        {...(this.props.focusedItem === suggestion ? styles.focusedLink : styles.link)}
                        key={suggestion.url}
                        onClick={() => {
                            this.props.goToUrl(suggestion.url);
                        }}
                        data-test-selector="autocompleteSuggestions_Result"
                        className="autocomplete-suggestions-link"
                    >
                        {suggestion.displayTitle}
                    </Link>
                ))}
            </>
        );
    }
}

export default AutocompleteSuggestions;
