ncore-ui-kit/src/components/dateTimeSheet/index.tsx

import {
    useState
} from "react";
import {
    View
} from "react-native";
import type IDateTimeSheetProps from "./type";
import stylesheet, {
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme
} from "../../core/hooks";
import DateSelector from "../dateSelector";
import TimeSelector from "../timeSelector";
import BottomSheet from "../bottomSheet";
import CheckBox from "../checkBox";
import Loading from "../loading";
import Button from "../button";
import Text from "../text";

const DateTimeSheet = ({
    localeBasedFirstDayOfWeek = true,
    isShowTodayIndicator = true,
    dayOfWeekLength = "short",
    LoadingIconComponentProp,
    selectMultipleObject,
    isWorkWithRealtime,
    isShowTools = true,
    dateTimePickerKey,
    bottomSheetProps,
    bottomSheetRef,
    customLocalize,
    selectObject,
    customTheme,
    setIsActive,
    pickerType,
    dateRange,
    maxChoice,
    minChoice,
    isLoading,
    isActive,
    dateRule,
    variant,
    maxDate,
    minDate,
    cancel,
    clean,
    title,
    date,
    ok
}: IDateTimeSheetProps) => {
    const {
        spaces
    } = NCoreUIKitTheme.useContext(customTheme);

    const {
        localize
    } = NCoreUIKitLocalize.useContext(customLocalize);

    const [
        isSheetContentReady,
        setIsSheetContentReady
    ] = useState(false);

    const {
        loadingContainer: loadingContainerDynamicStyle,
        contentContainer: contentContainerDynamicStyle,
        headerContainer: headerContainerDynamicStyle,
        bottomContainer: bottomContainerDynamicStyle,
        toolsContainer: toolsContainerDynamicStyle,
        cancelButton: cancelButtonDynamicStyle,
        headerTitle: headerTitleDynamicStyle,
        okButton: okButtonDynamicStyle
    } = useStyles({
        spaces
    });

    const renderBottomSheetContent = () => {
        if(isLoading) {
            return <View
                style={[
                    stylesheet.loadingContainer,
                    loadingContainerDynamicStyle
                ]}
            >
                {LoadingIconComponentProp ? <LoadingIconComponentProp
                    color="emphasized"
                    size={20}
                /> : <Loading/>}
            </View>;
        }

        return <View
            style={[
                contentContainerDynamicStyle
            ]}
        >
            {
                pickerType === "time" ? null : <DateSelector
                    localeBasedFirstDayOfWeek={localeBasedFirstDayOfWeek}
                    setIsSheetContentReady={setIsSheetContentReady}
                    selectMultipleObject={selectMultipleObject}
                    isShowTodayIndicator={isShowTodayIndicator}
                    dayOfWeekLength={dayOfWeekLength}
                    selectObject={selectObject}
                    dateRange={dateRange}
                    maxDate={maxDate}
                    minDate={minDate}
                    variant={variant}
                    date={date}
                />
            }
            {
                pickerType === "date" ? null : <TimeSelector
                    setIsSheetContentReady={setIsSheetContentReady}
                    selectMultipleObject={selectMultipleObject}
                    selectObject={selectObject}
                    pickerType={pickerType}
                    dateRange={dateRange}
                    maxDate={maxDate}
                    minDate={minDate}
                    variant={variant}
                    date={date}
                />
            }
        </View>;
    };

    const renderTools = () => {
        if(!isShowTools) {
            return null;
        }

        if(minChoice && maxChoice !== -1) {
            return null;
        }

        let isAnySelected = false;

        if(variant === "single" && date) {
            isAnySelected = true;
        }

        if(variant === "range" && dateRange && (dateRange.start || dateRange.end)) {
            isAnySelected = true;
        }

        if(variant === "rrule" && dateRule) {
            isAnySelected = true;
        }

        return <View
            style={[
                stylesheet.toolsContainer,
                toolsContainerDynamicStyle
            ]}
        >
            {!minChoice ? <CheckBox
                isChecked={isAnySelected ? "checked" : null}
                title={localize("clean-selection")}
                spreadBehaviour="free"
                onPress={() => {
                    clean();
                }}
            /> : null}
        </View>;
    };

    const renderBottomSheetHeader = () => {
        return <View
            style={[
                stylesheet.headerContainer,
                headerContainerDynamicStyle
            ]}
        >
            {title ? <Text
                variant="titleMediumSize"
                style={[
                    headerTitleDynamicStyle
                ]}
            >
                {title}
            </Text> : null}
            {renderTools()}
        </View>;
    };

    const renderBottomSheetBottom = () => {
        if(isWorkWithRealtime) {
            return null;
        }

        return <View
            style={[
                stylesheet.bottomContainer,
                bottomContainerDynamicStyle
            ]}
        >
            <Button
                title={localize("cancel")}
                spreadBehaviour="stretch"
                variant="outline"
                type="neutral"
                onPress={() => {
                    cancel();
                }}
                style={{
                    ...cancelButtonDynamicStyle
                }}
            />
            <Button
                spreadBehaviour="stretch"
                title={localize("ok")}
                onPress={() => {
                    ok();
                }}
                style={{
                    ...okButtonDynamicStyle
                }}
            />
        </View>;
    };

    return <BottomSheet
        {...bottomSheetProps}
        key={`${dateTimePickerKey}-bottomsheet`}
        isContentReady={isSheetContentReady}
        customKey={dateTimePickerKey}
        ref={bottomSheetRef}
        isAutoHeight={true}
        isActive={isActive}
        renderBottom={() => {
            return renderBottomSheetBottom();
        }}
        renderHeader={() => {
            return renderBottomSheetHeader();
        }}
        onClosed={() => {
            setIsActive(false);
        }}
    >
        {renderBottomSheetContent()}
    </BottomSheet>;
};
export default DateTimeSheet;