import { ChevronDown, ChevronLeft, ChevronRight } from "@truststack/icons-ui";
import { useState } from "react";
import { Pressable } from "react-native-web";
import { Adapt, Text, XStack, YStack, styled } from "tamagui";
import { useDatepickerContext } from "./DatePickerProvider";
import { Dialog } from "./Dialog";
import { Grid } from "./Grid";
import { Icon } from "./Icon";
import { IconButton } from "./IconButton";
import { Sheet, SheetContent } from "./Sheet";
import { Body } from "./typography";
import { jsx, jsxs } from "react/jsx-runtime";
function YearPicker({ value, ...props }) {
  const [startYear, setStartYear] = useState(value - value % 12), [open, setOpen] = useState(!1), { goToPreviousYear } = useDatepickerContext(), getYears = (start) => Array.from({ length: 12 }, (_, i) => start + i), nextYears = () => {
    setStartYear(startYear + 12);
  }, previousYears = () => {
    setStartYear(startYear - 12);
  }, years = getYears(startYear), handelChange = (year) => {
    setOpen(!1), goToPreviousYear(value - year);
  };
  return /* @__PURE__ */ jsxs(Dialog, { allowFlip: !0, open, onOpenChange: setOpen, children: [
    /* @__PURE__ */ jsx(
      Pressable,
      {
        onPress: () => {
          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: () => previousYears(), children: /* @__PURE__ */ jsx(Icon, { icon: ChevronLeft }) }),
              /* @__PURE__ */ jsx(Body, { textAlign: "center", children: `${years[0]} - ${years[years.length - 1]}` }),
              /* @__PURE__ */ jsx(Pressable, { onPress: () => nextYears(), children: /* @__PURE__ */ jsx(Icon, { icon: ChevronRight }) })
            ] }),
            /* @__PURE__ */ jsx(Grid, { children: years.map((year, index) => /* @__PURE__ */ jsx(
              Grid.Item,
              {
                compact: 4,
                exp: 4,
                ai: "center",
                children: /* @__PURE__ */ jsx(
                  YearButton,
                  {
                    onPress: () => 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")
  ] });
}
const 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.js.map
