import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import loadWishLists from "@insite/client-framework/Store/Pages/MyLists/Handlers/LoadWishLists";
import updateLoadParameter from "@insite/client-framework/Store/Pages/MyLists/Handlers/UpdateLoadParameter";
import translate from "@insite/client-framework/Translate";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import Clickable, { ClickablePresentationProps } from "@insite/mobius/Clickable";
import ChevronsUpDown from "@insite/mobius/Icons/ChevronsUpDown";
import OverflowMenu, { OverflowMenuProps } from "@insite/mobius/OverflowMenu";
import getColor from "@insite/mobius/utilities/getColor";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import * as React from "react";
import { connect, ResolveThunks } from "react-redux";
import { css } from "styled-components";

interface OwnProps extends WidgetProps {}

const mapStateToProps = (state: ApplicationState) => {
    return {
        query: state.pages.myLists.getWishListsParameter.query,
        currentSort: state.pages.myLists.getWishListsParameter.sort,
    };
};

const mapDispatchToProps = {
    updateLoadParameter,
    loadWishLists,
};

type Props = OwnProps & ResolveThunks<typeof mapDispatchToProps> & ReturnType<typeof mapStateToProps>;

export interface MyListsSortControlStyles {
    wrapper?: InjectableCss;
    sortByOverflowMenu?: OverflowMenuProps;
    sortByClickable?: ClickablePresentationProps;
    selectedSortByClickable?: ClickablePresentationProps;
}

export const sortControlStyles: MyListsSortControlStyles = {
    wrapper: {
        css: css`
            float: right;
        `,
    },
    sortByOverflowMenu: {
        iconProps: { src: ChevronsUpDown },
    },
    selectedSortByClickable: {
        css: css`
            color: ${getColor("primary")};
        `,
    },
};

const styles = sortControlStyles;

const sortOptions = [
    { value: "ModifiedOn DESC", displayName: translate("Last Updated") },
    { value: "Name ASC", displayName: translate("List Name: A-Z") },
    { value: "Name DESC", displayName: translate("List Name: Z-A") },
];

const sortChangeHandler = (value: string, props: Props) => {
    props.updateLoadParameter({ sort: value });
};

const MyListsSortControl: React.FunctionComponent<Props> = props => {
    return (
        <StyledWrapper {...styles.wrapper} data-test-selector="myListPage_ProductsSortBy">
            <OverflowMenu {...styles.sortByOverflowMenu}>
                {sortOptions?.map(sortOption => (
                    <Clickable
                        {...(sortOption.value === props.currentSort
                            ? styles.selectedSortByClickable
                            : styles.sortByClickable)}
                        key={sortOption.value}
                        onClick={() => sortChangeHandler(sortOption.value, props)}
                    >
                        {sortOption.displayName}
                    </Clickable>
                ))}
            </OverflowMenu>
        </StyledWrapper>
    );
};

const widgetModule: WidgetModule = {
    component: connect(mapStateToProps, mapDispatchToProps)(MyListsSortControl),
    definition: {
        group: "My Lists",
        displayName: "Sort Control",
        allowedContexts: ["MyListsPage"],
    },
};

export default widgetModule;
