import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { Platform } from "react-native";
import { Input, ThemeableStack, XStack, YStack, createStyledContext, styled, withStaticProperties } from "tamagui";
import { isDateValid } from "./dateHelper.native.js";
import { Body, Display, Title } from "./typography.native.js";
var TimePicker = function (param) {
    var {
        value,
        onChange,
        ...props
      } = param,
      handleHourChange = function (input) {
        var sanitizedText = input.replace(/[^0-9]/g, "");
        sanitizedText.length >= 3 && (sanitizedText = sanitizedText.slice(1, sanitizedText.length));
        var numericValue = parseInt(sanitizedText, 10),
          newDate = isDateValid(value) ? new Date(value) : /* @__PURE__ */new Date();
        (sanitizedText.length == 3 && sanitizedText.endsWith("0") && !sanitizedText.startsWith("0") || numericValue > 24) && (numericValue = 0), newDate.setHours(numericValue || 0), onChange(newDate);
      },
      handleMinuteChange = function (input) {
        var sanitizedText = input.replace(/[^0-9]/g, "");
        sanitizedText.length >= 3 && (sanitizedText = sanitizedText.slice(1, sanitizedText.length));
        var numericValue = parseInt(sanitizedText, 10),
          newDate = isDateValid(value) ? new Date(value) : /* @__PURE__ */new Date();
        (sanitizedText.length == 3 && sanitizedText.endsWith("0") && !sanitizedText.startsWith("0") || numericValue > 59) && (numericValue = 0), newDate.setMinutes(numericValue), onChange(newDate);
      },
      renderHour = useMemo(function () {
        var hour = value?.getHours() || 0;
        return hour < 10 ? `0${hour}` : `${hour}`;
      }, [value]),
      renderMinute = useMemo(function () {
        var minute = value?.getMinutes() || 0;
        return minute < 10 ? `0${minute}` : `${minute}`;
      }, [value]);
    return /* @__PURE__ */_jsxs(YStack, {
      gap: 12,
      children: [/* @__PURE__ */_jsxs(XStack, {
        ai: "center",
        gap: 24,
        ...props,
        children: [/* @__PURE__ */_jsx(YStack, {
          gap: 4,
          children: /* @__PURE__ */_jsx(TimeInput, {
            variant: "hour",
            value: renderHour,
            onChangeText: handleHourChange,
            keyboardType: "numeric",
            ...(Platform.OS != "web" ? {
              selection: {
                start: 0,
                end: 2
              }
            } : {})
          })
        }), /* @__PURE__ */_jsx(Display, {
          size: "large",
          margin: -12,
          pb: 4,
          children: ":"
        }), /* @__PURE__ */_jsx(YStack, {
          gap: 4,
          children: /* @__PURE__ */_jsx(TimeInput, {
            variant: "minute",
            value: renderMinute,
            onChangeText: handleMinuteChange,
            keyboardType: "numeric",
            marginRight: -12,
            ...(Platform.OS != "web" ? {
              selection: {
                start: 0,
                end: 2
              }
            } : {})
          })
        })]
      }), /* @__PURE__ */_jsxs(XStack, {
        gap: 110,
        children: [/* @__PURE__ */_jsx(Body, {
          size: "small",
          children: "Hour"
        }), /* @__PURE__ */_jsx(Body, {
          size: "small",
          children: "Minute"
        })]
      })]
    });
  },
  TimeInput = styled(Input, {
    name: "TimeInput",
    borderRadius: "$shape.corner_sm",
    height: 80,
    width: 96,
    focusStyle: {
      borderWidth: 0,
      outlineStyle: "none"
    },
    fos: 48,
    textAlign: "center",
    borderColor: "transparent",
    variants: {
      variant: {
        hour: {
          backgroundColor: "$primaryContainer",
          col: "$onPrimaryContainer",
          focusStyle: {
            borderWidth: 2,
            borderColor: "$primary"
          }
        },
        minute: {
          backgroundColor: "$surfaceContainerHighest",
          col: "$onSurface",
          focusStyle: {
            borderWidth: 2,
            borderColor: "$surfaceVariant"
          }
        }
      }
    }
  }),
  Frame = styled(ThemeableStack, {
    name: "VerticalSegments",
    height: 80,
    maxHeight: 80,
    width: 52,
    maxWidth: 52,
    borderWidth: 1,
    borderColor: "$outline",
    borderRadius: "$shape.corner_m",
    flexDirection: "column",
    fg: 1,
    overflow: "hidden"
  }),
  ItemContext = createStyledContext({
    selected: !1
  }),
  Item = styled(ThemeableStack, {
    name: "VerticalSegmentsItem",
    context: ItemContext,
    justifyContent: "center",
    f: 1,
    alignItems: "center",
    variants: {
      selected: {
        true: {
          backgroundColor: "$tertiaryContainer",
          hoverStyle: {
            backgroundColor: "$surfaceContainer"
          }
        },
        false: {
          hoverStyle: {
            backgroundColor: "$surfaceContainer"
          }
        }
      }
    }
  }),
  Label = styled(Title, {
    size: "large",
    context: ItemContext,
    variants: {
      selected: {
        true: {
          col: "$onTertiaryContainer"
        },
        false: {}
      }
    }
  }),
  SegmentItem = withStaticProperties(Item, {
    Props: ItemContext.Provider,
    Label
  }),
  VerticalSegment = withStaticProperties(Frame, {
    Item: SegmentItem
  });
export { TimePicker };
//# sourceMappingURL=TimePicker.native.js.map
