import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronDown, ChevronLeft, ChevronRight } from "@truststack/icons-ui";
import { useState } from "react";
import { Pressable } from "react-native";
import { Adapt, Text, XStack, YStack, styled } from "tamagui";
import { useDatepickerContext } from "./DatePickerProvider.native.js";
import { Dialog } from "./Dialog.native.js";
import { Grid } from "./Grid.native.js";
import { Icon } from "./Icon.native.js";
import { IconButton } from "./IconButton.native.js";
import { Sheet, SheetContent } from "./Sheet.native.js";
import { Body } from "./typography.native.js";
function YearPicker(param) {
  var {
      value,
      ...props
    } = param,
    [startYear, setStartYear] = useState(value - value % 12),
    [open, setOpen] = useState(!1),
    {
      goToPreviousYear
    } = useDatepickerContext(),
    getYears = function (start) {
      return Array.from({
        length: 12
      }, function (_, i) {
        return start + i;
      });
    },
    nextYears = function () {
      setStartYear(startYear + 12);
    },
    previousYears = function () {
      setStartYear(startYear - 12);
    },
    years = getYears(startYear),
    handelChange = function (year) {
      setOpen(!1), goToPreviousYear(value - year);
    };
  return /* @__PURE__ */_jsxs(Dialog, {
    allowFlip: !0,
    open,
    onOpenChange: setOpen,
    children: [/* @__PURE__ */_jsx(Pressable, {
      onPress: function () {
        setOpen(!0);
      },
      style: {
        flexGrow: 1
      },
      children: /* @__PURE__ */_jsxs(XStack, {
        gap: 4,
        alignItems: "center",
        justifyContent: "center",
        children: [/* @__PURE__ */_jsx(Icon, {
          size: 14,
          Icon: ChevronDown
        }), /* @__PURE__ */_jsx(Body, {
          textAlign: "center",
          children: value
        })]
      })
    }), /* @__PURE__ */_jsx(Adapt, {
      when: "sm",
      platform: "touch",
      children: /* @__PURE__ */_jsxs(Sheet, {
        modal: !0,
        snapPoints: [40],
        children: [/* @__PURE__ */_jsx(Sheet.Overlay, {}), /* @__PURE__ */_jsx(Sheet.Handle, {}), /* @__PURE__ */_jsx(Sheet.Frame, {
          children: /* @__PURE__ */_jsx(SheetContent, {
            children: /* @__PURE__ */_jsx(Adapt.Contents, {})
          })
        })]
      })
    }), /* @__PURE__ */_jsxs(Dialog.Portal, {
      children: [/* @__PURE__ */_jsx(Dialog.Overlay, {}, "year-picker-overlay"), /* @__PURE__ */_jsx(Dialog.Content, {
        width: 360,
        marginTop: 12,
        backgroundColor: "$surfaceContainerHigh",
        borderRadius: "$shape.corner_l",
        padding: "$spacing.margin_compact",
        borderColor: "$color.outline",
        borderWidth: "$border.outline",
        children: /* @__PURE__ */_jsxs(YStack, {
          width: "100%",
          children: [/* @__PURE__ */_jsxs(XStack, {
            ai: "center",
            justifyContent: "center",
            width: "100%",
            children: [/* @__PURE__ */_jsx(Pressable, {
              onPress: function () {
                return previousYears();
              },
              children: /* @__PURE__ */_jsx(Icon, {
                icon: ChevronLeft
              })
            }), /* @__PURE__ */_jsx(Body, {
              textAlign: "center",
              children: `${years[0]} - ${years[years.length - 1]}`
            }), /* @__PURE__ */_jsx(Pressable, {
              onPress: function () {
                return nextYears();
              },
              children: /* @__PURE__ */_jsx(Icon, {
                icon: ChevronRight
              })
            })]
          }), /* @__PURE__ */_jsx(Grid, {
            children: years.map(function (year, index) {
              return /* @__PURE__ */_jsx(Grid.Item, {
                compact: 4,
                exp: 4,
                ai: "center",
                children: /* @__PURE__ */_jsx(YearButton, {
                  onPress: function () {
                    return handelChange(year);
                  },
                  hoverStyle: {
                    col: "$onSurfaceVariant"
                  },
                  col: "$onSurface",
                  selected: year == value,
                  ...props,
                  children: /* @__PURE__ */_jsx(YearText, {
                    children: year
                  })
                })
              }, `year-${index}`);
            })
          })]
        })
      }, "year-picker-content")]
    }, "year-picker-portal")]
  });
}
var YearButton = styled(IconButton, {
    name: "YearButton",
    bc: "transparent",
    m: 4,
    mb: 4,
    w: 100,
    hoverStyle: {
      col: "$onSurfaceVariant"
    },
    variants: {
      selected: {
        true: {
          backgroundColor: "$outlineVariant"
        }
      }
    }
  }),
  YearText = styled(Text, {
    name: "YearText",
    bc: "transparent",
    variants: {
      selected: {
        true: {
          color: "$onTertiary"
        }
      }
    }
  });
export { YearPicker };
//# sourceMappingURL=YearPicker.native.js.map
