import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getSession } from "@insite/client-framework/Store/Context/ContextSelectors";
import updateSearchFields from "@insite/client-framework/Store/Pages/OrderHistory/Handlers/UpdateSearchFields";
import translate from "@insite/client-framework/Translate";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
import SearchFieldWrapper, {
    SearchFieldWrapperStyles,
} from "@insite/content-library/Widgets/OrderHistory/SearchFieldWrapper";
import Checkbox, { CheckboxProps } from "@insite/mobius/Checkbox";
import * as React from "react";
import { connect, ResolveThunks } from "react-redux";

interface OwnProps extends WidgetProps {}

const mapStateToProps = (state: ApplicationState) => {
    return {
        parameter: state.pages.orderHistory.getOrdersParameter,
        session: getSession(state),
    };
};

const mapDispatchToProps = {
    updateSearchFields,
};

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

export interface OrderHistorySearchFieldShowMyOrdersStyles {
    select?: CheckboxProps;
    wrapper?: SearchFieldWrapperStyles;
}

export const showMyOrdersStyles: OrderHistorySearchFieldShowMyOrdersStyles = {};
const styles = showMyOrdersStyles;

class OrderHistorySearchFieldShowMyOrders extends React.Component<Props> {
    handleChange = (checked: boolean) => {
        this.props.updateSearchFields({ showMyOrders: checked ? true : undefined });
    };

    render() {
        return (
            <SearchFieldWrapper extendedStyles={styles.wrapper}>
                <Checkbox
                    checked={this.props.parameter.showMyOrders?.toString() === "true"}
                    onChange={(_, checked) => {
                        this.handleChange(checked);
                    }}
                >
                    {translate("Show my orders only")}
                </Checkbox>
            </SearchFieldWrapper>
        );
    }
}

const widgetModule: WidgetModule = {
    component: connect(mapStateToProps, mapDispatchToProps)(OrderHistorySearchFieldShowMyOrders),
    definition: {
        group: "Order History",
        displayName: "User Orders only",
        allowedContexts: ["OrderHistoryPage", "VmiOrderHistoryPage"],
    },
};

export default widgetModule;
