import Zone from "@insite/client-framework/Components/Zone";
import toggleFiltersOpen from "@insite/client-framework/Store/Pages/SavedOrderList/Handlers/ToggleFiltersOpen";
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 { ClickablePresentationProps } from "@insite/mobius/Clickable";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import { IconPresentationProps } from "@insite/mobius/Icon";
import Filter from "@insite/mobius/Icons/Filter";
import React from "react";
import { connect, ResolveThunks } from "react-redux";
import { css } from "styled-components";

const mapDispatchToProps = {
    toggleFiltersOpen,
};

type Props = WidgetProps & ResolveThunks<typeof mapDispatchToProps>;

export interface SavedOrderListHeaderStyles {
    container?: GridContainerProps;
    titleGridItem?: GridItemProps;
    emptyGridItem?: GridItemProps;
    toggleFilterGridItem?: GridItemProps;
    /** @deprecated Use toggleFilterButtonIcon instead. */
    toggleFilterIcon?: IconPresentationProps;
    /** @deprecated Use toggleFilterButton instead. */
    toggleFilterClickable?: ClickablePresentationProps;
    toggleFilterButton?: ButtonPresentationProps;
    toggleFilterButtonIcon?: ButtonIconPresentationProps;
}

export const savedOrderListHeaderStyles: SavedOrderListHeaderStyles = {
    container: {
        gap: 8,
        css: css`
            padding-bottom: 20px;
        `,
    },
    titleGridItem: {
        width: 11,
        style: { fontWeight: 600 },
    },
    toggleFilterGridItem: {
        width: 1,
        style: {
            justifyContent: "flex-end",
            alignSelf: "flex-end",
        },
    },
    toggleFilterButton: {
        color: "common.background",
        shape: "pill",
        buttonType: "solid",
        shadow: false,
        css: css`
            width: 40px;
            padding: 0;
        `,
    },
    toggleFilterButtonIcon: {
        src: Filter,
        size: 24,
    },
};
const styles = savedOrderListHeaderStyles;

const SavedOrderListHeader = ({ toggleFiltersOpen, id }: Props) => {
    return (
        <GridContainer {...styles.container}>
            <GridItem {...styles.titleGridItem}>
                <Zone contentId={id} zoneName="Content" />
            </GridItem>
            <GridItem {...styles.toggleFilterGridItem}>
                <Button
                    {...styles.toggleFilterButton}
                    onClick={() => toggleFiltersOpen()}
                    data-test-selector="savedOrderList_showHideFilters"
                >
                    <ButtonIcon {...styles.toggleFilterButtonIcon} />
                </Button>
            </GridItem>
        </GridContainer>
    );
};

const widgetModule: WidgetModule = {
    component: connect(null, mapDispatchToProps)(SavedOrderListHeader),
    definition: {
        group: "Saved Order List",
        displayName: "Header",
        allowedContexts: ["SavedOrderListPage"],
    },
};

export default widgetModule;
