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

const stylesheet = StyleSheet.create({
    inputsContainer: {
        justifyContent: "flex-start",
        flexDirection: "row",
        alignItems: "center"
    },
    rangeContainer: {
        flexDirection: "column"
    },
    container: {
        width: "100%"
    },
    colonText: {
    },
    timeTitle: {
    }
});

export const useStyles = ({
    isTimeSelectWorksWithCenterWhenTimePicker,
    pickerType,
    spaces
}: TimeSelectorDynamicStyle) => {
    const styles = {
        colonText: {
            marginHorizontal: spaces.spacingXs
        } as Mutable<TextStyle>,
        container: {
            marginTop: spaces.spacingMd
        } as Mutable<ViewStyle>,
        inputsContainer: {
            marginTop: spaces.spacingXs
        } as Mutable<ViewStyle>,
        rangeContainer: {
        } as Mutable<ViewStyle>,
        timeTitle: {
        } as Mutable<TextStyle>
    };

    if(pickerType === "time" && isTimeSelectWorksWithCenterWhenTimePicker) {
        styles.inputsContainer.justifyContent = "center";
        styles.rangeContainer.justifyContent = "center";
    }

    return styles;
};
export default stylesheet;
