import {
    type ViewStyle,
    StyleSheet
} from "react-native";
import {
    type SelectSheetDynamicStyleType
} from "./type";
import type {
    Mutable
} from "../../types";

const stylesheet = StyleSheet.create({
    headerContainer: {
        flexDirection: "column",
        width: "100%"
    },
    bottomContainer: {
        flexDirection: "row",
        alignItems: "center"
    },
    loadingContainer: {
        justifyContent: "center",
        alignItems: "center",
        flex: 1
    },
    itemContainer: {
        flexDirection: "row",
        alignItems: "center"
    },
    itemContentContainer: {
        flex: 1
    },
    checkIconContainer: {
        justifyContent: "center",
        alignItems: "center"
    }
});

export const useStyles = ({
    isSearchable,
    radiuses,
    spaces,
    colors
}: SelectSheetDynamicStyleType) => {
    const styles = {
        contentContainer: {
            padding: spaces.spacingSm
        } as Mutable<ViewStyle>,
        headerContainer: {
            padding: spaces.spacingSm
        } as Mutable<ViewStyle>,
        headerTitle: {

        } as Mutable<ViewStyle>,
        bottomContainer: {
            marginTop: spaces.spacingSm,
            padding: spaces.spacingSm
        } as Mutable<ViewStyle>,
        cancelButton: {
            marginRight: spaces.spacingSm
        } as Mutable<ViewStyle>,
        okButton: {
            marginLeft: spaces.spacingSm
        } as Mutable<ViewStyle>,
        itemContainer: {
            backgroundColor: colors.content.container.mid,
            paddingHorizontal: spaces.spacingMd,
            paddingVertical: spaces.spacingSm,
            borderRadius: radiuses.form
        } as Mutable<ViewStyle>,
        checkIconContainer: {
            height: 24 + spaces.spacingSm,
            width: 24 + spaces.spacingSm
        } as Mutable<ViewStyle>,
        loadingContainer: {
            padding: spaces.spacingMd
        } as Mutable<ViewStyle>
    };

    if(isSearchable) {
        styles.headerTitle.marginBottom = spaces.spacingSm;
    }

    return styles;
};
export default stylesheet;