import {
  Popover
} from "./chunk-5AVBYDPB.js";
import {
  Grid
} from "./chunk-EGEQY3KT.js";
import {
  Collapse
} from "./chunk-LZJR77Q2.js";
import {
  Heading
} from "./chunk-HK224ADT.js";
import {
  Separator
} from "./chunk-HYITAA4J.js";
import {
  IconButton
} from "./chunk-O3DNDMV3.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  Typo
} from "./chunk-52MVZ6AN.js";
import {
  Button
} from "./chunk-U7JPP7WJ.js";
import {
  Card
} from "./chunk-2ZQK7NTN.js";
import {
  Badge
} from "./chunk-EWD4AO5N.js";
import {
  Box
} from "./chunk-4Y5BEXVN.js";
import {
  ChevronDownIcon,
  ChevronUpIcon,
  Pencil1Icon,
  RocketIcon,
  TrashIcon
} from "./chunk-TGX7XRZN.js";
import {
  __spreadValues
} from "./chunk-N552FDTV.js";

// src/app/platform/goal-manage-card-read.tsx
import { useCallback, useMemo, useState } from "react";
import { format, startOfDay } from "date-fns";
import { jsx, jsxs } from "react/jsx-runtime";
function GoalManageCardRead(props) {
  const {
    title,
    dueDate,
    completed,
    expectedEffect,
    huddle,
    onClickDelete,
    onClickEdit,
    defaultOpen,
    onClickIncomplete,
    onClickComplete
  } = props;
  const [open, setOpen] = useState(Boolean(defaultOpen));
  const onClickOpen = useCallback(() => {
    setOpen((p) => !p);
  }, []);
  const icon = open ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {});
  const badgeMeta = useMemo(() => {
    if (!completed && dueDate) {
      if (dueDate >= startOfDay(/* @__PURE__ */ new Date()))
        return {
          color: "success",
          children: "\uC9C4\uD589 \uC911"
        };
      return { color: "error", children: "\uBBF8\uB2EC\uC131" };
    }
    return null;
  }, [completed, dueDate]);
  const renderSubTitle = useCallback((subTitle) => {
    return /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", children: subTitle });
  }, []);
  const renderSubContent = useCallback((content) => {
    return /* @__PURE__ */ jsx(Typo, { as: "p", color: "gray", children: content });
  }, []);
  const renderCompleteButton = useCallback(() => {
    if (completed) {
      return /* @__PURE__ */ jsx(Button, { onClick: onClickIncomplete, size: "small", variant: "surface", children: "\uC9C4\uD589\uC911\uC778 \uACFC\uC81C\uB85C \uB3CC\uB824\uB193\uAE30" });
    }
    return /* @__PURE__ */ jsxs(Popover.Root, { children: [
      /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(Button, { size: "small", children: [
        /* @__PURE__ */ jsx(RocketIcon, {}),
        "\uB2EC\uC131\uD558\uAE30"
      ] }) }),
      /* @__PURE__ */ jsxs(Popover.Content, { children: [
        /* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uBAA9\uD45C\uB97C \uB2EC\uC131\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
        /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", mt: "3", children: [
          /* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "small", variant: "outline", children: "\uC544\uB2C8\uC694" }) }),
          /* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: onClickComplete, size: "small", children: "\uC608" }) })
        ] })
      ] })
    ] });
  }, [completed, onClickIncomplete, onClickComplete]);
  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Grid, { align: "center", columns: "auto 1fr", gapX: "3", children: [
    /* @__PURE__ */ jsx(IconButton, { onClick: onClickOpen, variant: "ghost", children: icon }),
    /* @__PURE__ */ jsx(Heading, { variant: "heading4", children: title }),
    /* @__PURE__ */ jsxs(Flex, { align: "center", gridColumnStart: "2", justify: "between", mt: "2", children: [
      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
        badgeMeta ? /* @__PURE__ */ jsx(Badge, __spreadValues({}, badgeMeta)) : null,
        /* @__PURE__ */ jsx(Typo, { color: "gray", children: dueDate ? format(dueDate, "yyyy\uB144 MM\uC6D4 dd\uC77C") : null })
      ] }),
      renderCompleteButton()
    ] }),
    open ? /* @__PURE__ */ jsx(
      Separator,
      {
        mb: "4",
        mt: "4",
        size: "4",
        style: { gridColumnStart: "span 2" }
      }
    ) : null,
    /* @__PURE__ */ jsx(Box, { gridColumnStart: "2", p: "0", children: /* @__PURE__ */ jsxs(Collapse, { open, children: [
      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
        /* @__PURE__ */ jsxs(Box, { children: [
          renderSubTitle(
            "\uD574\uB2F9 \uBAA9\uD45C\uB97C \uB2EC\uC131\uD558\uBA74, \uC544\uB798\uC640 \uAC19\uC740 \uACB0\uACFC\uB97C \uC5BB\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4"
          ),
          renderSubContent(expectedEffect)
        ] }),
        /* @__PURE__ */ jsxs(Box, { children: [
          renderSubTitle(
            "\uBAA9\uD45C\uB97C \uC774\uB8E8\uAE30\uAE4C\uC9C0 \uBC29\uD574\uAC00 \uB420 \uC218 \uC788\uB294 \uC694\uC18C\uB4E4\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4"
          ),
          renderSubContent(huddle)
        ] })
      ] }),
      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "end", mt: "3", children: [
        /* @__PURE__ */ jsxs(Popover.Root, { children: [
          /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(Button, { color: "gray", size: "small", variant: "ghost", children: [
            /* @__PURE__ */ jsx(TrashIcon, {}),
            "\uC0AD\uC81C\uD558\uAE30"
          ] }) }),
          /* @__PURE__ */ jsxs(Popover.Content, { children: [
            /* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uBAA9\uD45C\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
            /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", mt: "3", children: [
              /* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "small", variant: "outline", children: "\uC544\uB2C8\uC694" }) }),
              /* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: onClickDelete, size: "small", children: "\uC608" }) })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ jsxs(Button, { onClick: onClickEdit, size: "small", variant: "surface", children: [
          /* @__PURE__ */ jsx(Pencil1Icon, {}),
          "\uC218\uC815\uD558\uAE30"
        ] })
      ] })
    ] }) })
  ] }) });
}

export {
  GoalManageCardRead
};
//# sourceMappingURL=chunk-UJ4QQRC6.js.map