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 toggleFiltersOpen from "@insite/client-framework/Store/Pages/MyLists/Handlers/ToggleFiltersOpen";
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 Button, { ButtonIcon, ButtonIconPresentationProps, ButtonPresentationProps } from "@insite/mobius/Button";
import Clickable, { ClickablePresentationProps } from "@insite/mobius/Clickable";
import ChevronsUpDown from "@insite/mobius/Icons/ChevronsUpDown";
import Filter from "@insite/mobius/Icons/Filter";
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";

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

const mapDispatchToProps = {
    updateLoadParameter,
    loadWishLists,
    toggleFiltersOpen,
};

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

export interface MyListsSortControlStyles {
    wrapper?: InjectableCss;
    sortByOverflowMenu?: OverflowMenuProps;
    sortByClickable?: ClickablePresentationProps;
    selectedSortByClickable?: ClickablePresentationProps;
    toggleFilterButton?: ButtonPresentationProps;
    toggleFilterButtonIcon?: ButtonIconPresentationProps;
}

export const sortControlStyles: MyListsSortControlStyles = {
    wrapper: {
        css: css`
            display: flex;
            justify-content: flex-end;
        `,
    },
    sortByOverflowMenu: {
        iconProps: { src: ChevronsUpDown },
    },
    selectedSortByClickable: {
        css: css`
            color: ${getColor("primary")};
        `,
    },
    toggleFilterButton: {
        color: "common.background",
        shape: "pill",
        buttonType: "solid",
        shadow: false,
        css: css`
            width: 40px;
            padding: 0;
            margin-right: 10px;
        `,
    },
    toggleFilterButtonIcon: {
        src: Filter,
        size: 24,
    },
};

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 MyListsSortControl = ({ currentSort, toggleFiltersOpen, updateLoadParameter }: Props) => {
    const sortChangeHandler = (value: string) => {
        updateLoadParameter({ sort: value });
    };

    return (
        <StyledWrapper {...styles.wrapper} data-test-selector="myListPage_productsSortBy">
            <Button
                {...styles.toggleFilterButton}
                onClick={() => toggleFiltersOpen()}
                aria-label={translate("Toggle Filter")}
                data-test-selector="mylists_toggleFilter"
            >
                <ButtonIcon {...styles.toggleFilterButtonIcon} />
            </Button>
            <OverflowMenu {...styles.sortByOverflowMenu}>
                {sortOptions?.map(sortOption => (
                    <Clickable
                        {...(sortOption.value === currentSort
                            ? styles.selectedSortByClickable
                            : styles.sortByClickable)}
                        key={sortOption.value}
                        onClick={() => sortChangeHandler(sortOption.value)}
                    >
                        {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;
