import {
  STEPS
} from "./chunk-YOTHQSXQ.mjs";
import {
  TypeButton
} from "./chunk-VQDSXVDB.mjs";

// tmp-babel/profiles/web/ProfileComponent/ReportButtonWithDialog/components/SelectReportTypeStep.js
import { ChevronIcon } from "@baseapp-frontend/design-system/components/web/icons";
import { useResponsive } from "@baseapp-frontend/design-system/hooks/web";
import { Box, Divider, Typography } from "@mui/material";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var SelectReportTypeStep = function SelectReportTypeStep2(_ref) {
  var reportTypes = _ref.reportTypes, reportType = _ref.reportType, _ref$subType = _ref.subType, subType = _ref$subType === void 0 ? false : _ref$subType, setReportType = _ref.setReportType, setCurrentStep = _ref.setCurrentStep, setReportSubType = _ref.setReportSubType;
  var smDown = useResponsive("down", "sm");
  var renderReportTypeButtons = function renderReportTypeButtons2(types) {
    return types === null || types === void 0 ? void 0 : types.map(function(type) {
      return /* @__PURE__ */ _jsx(TypeButton, {
        onClick: function onClick() {
          var _subTypes;
          if (subType) {
            setReportSubType(type);
            setCurrentStep(STEPS.text);
            return;
          }
          setReportType(type);
          if (type !== null && type !== void 0 && (_subTypes = type.subTypes) !== null && _subTypes !== void 0 && (_subTypes = _subTypes.edges) !== null && _subTypes !== void 0 && _subTypes.length) {
            setCurrentStep(STEPS.subTypes);
            return;
          }
          setCurrentStep(STEPS.text);
        },
        endIcon: /* @__PURE__ */ _jsx(ChevronIcon, {
          position: "right"
        }),
        sx: {
          marginX: "-12px",
          width: "calc(100% + 24px)"
        },
        children: /* @__PURE__ */ _jsx(Typography, {
          variant: "body2",
          children: type === null || type === void 0 ? void 0 : type.label
        })
      }, type === null || type === void 0 ? void 0 : type.id);
    });
  };
  return /* @__PURE__ */ _jsxs(_Fragment, {
    children: [subType ? /* @__PURE__ */ _jsx(Typography, {
      variant: "h5",
      children: reportType === null || reportType === void 0 ? void 0 : reportType.label
    }) : /* @__PURE__ */ _jsxs(_Fragment, {
      children: [/* @__PURE__ */ _jsx(Box, {
        children: /* @__PURE__ */ _jsx(Typography, {
          variant: "h5",
          textAlign: smDown ? "center" : "left",
          children: "Why are you reporting this?"
        })
      }), /* @__PURE__ */ _jsx(Box, {
        children: /* @__PURE__ */ _jsx(Typography, {
          variant: "body2",
          textAlign: smDown ? "center" : "left",
          children: "Your report is anonymous. If someone is in immediate danger, call the local emergency services - don't wait."
        })
      })]
    }), /* @__PURE__ */ _jsx(Divider, {
      sx: {
        marginX: "-32px"
      }
    }), /* @__PURE__ */ _jsx(Box, {
      display: "flex",
      flexDirection: "column",
      children: reportTypes && renderReportTypeButtons(reportTypes)
    })]
  });
};
var SelectReportTypeStep_default = SelectReportTypeStep;

export {
  SelectReportTypeStep_default
};
//# sourceMappingURL=chunk-R7BO5LYY.mjs.map