import useAppDispatch from "@insite/client-framework/Common/Hooks/useAppDispatch";
import useAppSelector from "@insite/client-framework/Common/Hooks/useAppSelector";
import mergeToNew from "@insite/client-framework/Common/mergeToNew";
import wrapInContainerStyles from "@insite/client-framework/Common/wrapInContainerStyles";
import loadVmiBin from "@insite/client-framework/Store/Data/VmiBins/Handlers/LoadVmiBin";
import { getVmiBinState } from "@insite/client-framework/Store/Data/VmiBins/VmiBinsSelectors";
import translate from "@insite/client-framework/Translate";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import getColor from "@insite/mobius/utilities/getColor";
import React, { FC, useEffect } from "react";
import { css } from "styled-components";

interface OwnProps {
    locationId?: string | null;
    binId?: string | null;
    isCondensed: boolean;
    extendedStyles?: ProductBinNumbersStyles;
}

type Props = OwnProps;

export interface ProductBinNumbersStyles {
    container?: GridContainerProps;
    productBinGroupContainer?: GridContainerProps;
    productBinGroupGridItem?: GridItemProps;
    productBinNumberGridItem?: GridItemProps;
    binNumberTitleText?: TypographyPresentationProps;
    binNumberValueText?: TypographyPresentationProps;
    countNumberTitleText?: TypographyPresentationProps;
    countNumberValueText?: TypographyPresentationProps;
    minNumberTitleText?: TypographyPresentationProps;
    minNumberValueText?: TypographyPresentationProps;
    maxNumberTitleText?: TypographyPresentationProps;
    maxNumberValueText?: TypographyPresentationProps;
}

export const productBinNumbersStyles: ProductBinNumbersStyles = {
    container: {
        css: css`
            flex-direction: column;
            padding: 0;
            margin: 15px 5px;
        `,
    },
    productBinNumberGridItem: {
        width: [12, 12],
        css: css`
            flex-direction: row;
            padding: 2px;
        `,
    },
    productBinGroupGridItem: {
        width: [12, 12],
        css: css`
            flex-direction: row;
            width: 100%;
            border: 2px solid ${getColor("primary.main")};
            border-radius: 8px;
            padding: 5px;
        `,
    },
    productBinGroupContainer: {
        offsetCss: css`
            flex-direction: column;
            width: 100%;
            margin: 0;
        `,
    },
    binNumberTitleText: {
        css: css`
            flex: 0 0 auto;
        `,
    },
    binNumberValueText: {
        css: css`
            flex: 1 1 auto;
            min-width: 0;
            padding-left: 3px;
            ${wrapInContainerStyles}
        `,
    },
    countNumberTitleText: {
        css: css`
            flex: 0 0 auto;
        `,
    },
    countNumberValueText: {
        weight: "bold",
        css: css`
            flex: 1 1 auto;
            min-width: 0;
            padding-left: 3px;
            color: ${getColor("primary.main")};
            ${wrapInContainerStyles}
        `,
    },
    minNumberTitleText: {
        css: css`
            flex: 0 0 auto;
        `,
    },
    minNumberValueText: {
        css: css`
            flex: 1 1 auto;
            min-width: 0;
            padding-left: 3px;
            ${wrapInContainerStyles}
        `,
    },
    maxNumberTitleText: {
        css: css`
            flex: 0 0 auto;
        `,
    },
    maxNumberValueText: {
        css: css`
            flex: 1 1 auto;
            min-width: 0;
            padding-left: 3px;
            ${wrapInContainerStyles}
        `,
    },
};

const ProductBinNumbers = ({ locationId, binId, isCondensed, extendedStyles }: Props) => {
    if (!locationId || !binId) {
        return null;
    }

    const [styles] = React.useState(() => mergeToNew(productBinNumbersStyles, extendedStyles));
    const vmiBinState = useAppSelector(state => getVmiBinState(state, binId));
    const dispatch = useAppDispatch();

    useEffect(() => {
        dispatch(
            loadVmiBin({
                vmiLocationId: locationId,
                vmiBinId: binId,
            }),
        );
    }, [locationId, binId]);

    return (
        <GridContainer {...styles.container}>
            <GridItem {...styles.productBinGroupGridItem}>
                {isCondensed && (
                    <>
                        <GridContainer {...styles.productBinGroupContainer}>
                            <GridItem {...styles.productBinNumberGridItem}>
                                <Typography {...styles.binNumberTitleText}>{translate("Bin #")}:</Typography>
                                <Typography {...styles.binNumberValueText}>{vmiBinState.value?.binNumber}</Typography>
                            </GridItem>
                            <GridItem {...styles.productBinNumberGridItem}>
                                <Typography {...styles.countNumberTitleText}>{translate("Count")}:</Typography>
                                <Typography {...styles.countNumberValueText}>
                                    {vmiBinState.value?.lastCountQty}
                                </Typography>
                            </GridItem>
                            <GridItem {...styles.productBinNumberGridItem}>
                                <Typography {...styles.minNumberTitleText}>{translate("Min")}:</Typography>
                                <Typography {...styles.minNumberValueText}>{vmiBinState.value?.minimumQty}</Typography>
                            </GridItem>
                            <GridItem {...styles.productBinNumberGridItem}>
                                <Typography {...styles.maxNumberTitleText}>{translate("Max")}:</Typography>
                                <Typography {...styles.maxNumberValueText}>{vmiBinState.value?.maximumQty}</Typography>
                            </GridItem>
                        </GridContainer>
                    </>
                )}
                {!isCondensed && (
                    <>
                        <GridContainer {...styles.productBinGroupContainer}>
                            <GridItem {...styles.productBinNumberGridItem}>
                                <Typography {...styles.binNumberTitleText}>{translate("Bin #")}:</Typography>
                                <Typography {...styles.binNumberValueText}>{vmiBinState.value?.binNumber}</Typography>
                            </GridItem>
                            <GridItem {...styles.productBinNumberGridItem}>
                                <Typography {...styles.countNumberTitleText}>{translate("Count")}:</Typography>
                                <Typography {...styles.countNumberValueText}>
                                    {vmiBinState.value?.lastCountQty}
                                </Typography>
                            </GridItem>
                        </GridContainer>
                        <GridContainer {...styles.productBinGroupContainer}>
                            <GridItem {...styles.productBinNumberGridItem}>
                                <Typography {...styles.minNumberTitleText}>{translate("Min")}:</Typography>
                                <Typography {...styles.minNumberValueText}>{vmiBinState.value?.minimumQty}</Typography>
                            </GridItem>
                            <GridItem {...styles.productBinNumberGridItem}>
                                <Typography {...styles.maxNumberTitleText}>{translate("Max")}:</Typography>
                                <Typography {...styles.maxNumberValueText}>{vmiBinState.value?.maximumQty}</Typography>
                            </GridItem>
                        </GridContainer>
                    </>
                )}
            </GridItem>
        </GridContainer>
    );
};

export default ProductBinNumbers;
