import {Order} from "../../types/order";
import {RootState, useAppDispatch} from "../../redux/store";
import {useSelector} from "react-redux";
import {StyleSheet, View} from "react-native";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {RFPercentage} from "react-native-responsive-fontsize";
import AssemblyProductSelect from "./AssemblyProductSelect";
import ProductImageView from "./ProductImageView";
import OrderInfoView from "./OrderInfoView";
import AssemblyControls from "./AssemblyControls";
import AcceptAssemblyModal from "./AcceptAssemblyModal";
import assemblyApi, {CreateAssemblyResponse} from "../../api/assemblyApi";
import {selectProduct, setAssembly, startAssembly} from "../../features/assembly/assemblySlice";

type Props = {
    order: Order;
}
const AssemblyView = (props: Props) => {
    const {order} = props;
    const dispatch = useAppDispatch();
    const state = useSelector((state: RootState) => state.assembly);
    const onCreated = (_: CreateAssemblyResponse) => {
        assemblyApi.getActive().then(assembly => {
            dispatch(setAssembly(assembly));
            dispatch(startAssembly());
        })
    }
    function getImageUrl() {
        const productsImages = order.products.map(op=>op.imageUrl);
        if (state.selectedProduct && productsImages.includes(state.selectedProduct.imageUrl)){
            return state.selectedProduct.imageUrl;
        }
        if (order.products.length > 0) {
            return order.products[0].imageUrl;
        }
        return "";
    }

    return (
        <View style={styles.viewContainer}>
            <View style={styles.topSection}>
                <AssemblyProductSelect order={order}/>
                <ProductImageView
                    imageUrl={getImageUrl()}/>
            </View>
            <View style={styles.bottomSection}>
                <OrderInfoView
                    order={order}
                    selectedProduct={state.selectedProduct}
                />
                <View style={styles.buttonsWrapper}>
                    <AssemblyControls/>
                </View>
            </View>
            <AcceptAssemblyModal
                onCreated={response => onCreated(response)}
            />
        </View>

    )
}


const styles = StyleSheet.create({
    viewContainer: {
        width: "100%",
        height: "100%",
        display: "flex",
        paddingHorizontal: responsiveWidth(5),
        paddingBottom: responsiveHeight(10),
        rowGap: responsiveHeight(2),
    },
    topSection: {
        display: "flex",
        flexDirection: "row",
        columnGap: responsiveWidth(3),
        height: responsiveHeight(30),
    },
    productSelectWrapper: {
        flex: 0.5,
        backgroundColor: "white",
        borderRadius: RFPercentage(3),
        padding: RFPercentage(2),
    },
    bottomSection: {

        flex: 1,
        borderRadius: RFPercentage(3),
        flexDirection: "row",
        columnGap: responsiveWidth(3),
    },
    buttonsWrapper: {
        backgroundColor: "white",
        padding: RFPercentage(2),
        flex: 0.5,
        borderRadius: RFPercentage(3),
        rowGap: responsiveHeight(2)
    }
})
export default AssemblyView;