import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getSettingsCollection } from "@insite/client-framework/Store/Context/ContextSelectors";
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 Select, { SelectPresentationProps } from "@insite/mobius/Select";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import * as React from "react";
import { connect, ResolveThunks } from "react-redux";

const mapStateToProps = (state: ApplicationState) => {
    return {
        filter: state.pages.myLists.getWishListsParameter.filter,
        wishListSettings: getSettingsCollection(state).wishListSettings,
    };
};

const mapDispatchToProps = {
    updateLoadParameter,
};

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

export interface MyListsViewStyles {
    wrapper?: InjectableCss;
    select?: SelectPresentationProps;
}

export const myListsViewStyles: MyListsViewStyles = {};

const styles = myListsViewStyles;

const MyListsView = (props: Props) => {
    const viewChangeHandler = (event: React.FormEvent<HTMLSelectElement>) => {
        props.updateLoadParameter({ filter: event.currentTarget.value });
    };

    return (
        <StyledWrapper {...styles.wrapper}>
            <Select
                {...styles.select}
                onChange={viewChangeHandler}
                value={props.filter || "all"}
                aria-label={translate("Filter")}
                data-test-selector="myListViewFilter"
            >
                <option value="all">{translate("All Lists")}</option>
                <option value="favorites">{translate("Favorites")}</option>
                {props.wishListSettings.showAutoGeneratedLists && (
                    <option value="autogenerated">{translate("Auto-generated")}</option>
                )}
                <option value="hidden">{translate("Hidden")}</option>
            </Select>
        </StyledWrapper>
    );
};

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

export default widgetModule;
