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

const stylesheet = StyleSheet.create({
    contentContainer: {
        flexDirection: "column"
    },
    headerContainer: {
        flexDirection: "column",
        width: "100%"
    },
    bottomContainer: {
        flexDirection: "row",
        alignItems: "center"
    },
    loadingContainer: {
        justifyContent: "center",
        alignItems: "center",
        flex: 1
    },
    itemContentContainer: {
        flex: 1
    },
    toolsContainer: {
        justifyContent: "space-between",
        flexDirection: "row",
        alignItems: "center"
    },
    moreLoadingContainer: {
        justifyContent: "center",
        alignItems: "center",
        width: "100%"
    },
    calendarChangerToolContainer: {
        alignSelf: "baseline",
        flexDirection: "row"
    },
    calendarChangerToolButton: {
    }
});

export const useStyles = ({
    radiuses,
    borders,
    spaces,
    colors
}: DateTimeSheetDynamicStyleType) => {
    const styles = {
        contentContainer: {
            paddingVertical: spaces.spacingSm
        } as Mutable<ViewStyle>,
        headerContainer: {
            marginBottom: 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>,
        loadingContainer: {
            padding: spaces.spacingMd
        } as Mutable<ViewStyle>,
        toolsContainer: {
            marginTop: spaces.spacingSm
        } as Mutable<ViewStyle>,
        moreLoadingContainer: {
            padding: spaces.spacingSm
        } as Mutable<ViewStyle>,
        calendarChangerToolContainer: {
            borderColor: colors.content.border.subtle,
            marginBottom: spaces.spacingSm,
            borderRadius: radiuses.actions,
            borderWidth: borders.line
        } as Mutable<ViewStyle>,
        calendarChangerToolButton: {
            paddingHorizontal: spaces.spacingSm,
            paddingVertical: spaces.spacingSm,
            borderRadius: radiuses.actions
        } as Mutable<ViewStyle>
    };

    return styles;
};
export default stylesheet;