'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var index$2 = require('./index-e16b8fc3.js');
var index = require('./index-a31ed3e1.js');
var index$4 = require('./index-0f1d64dc.js');
var index$1 = require('./index-3643ff1b.js');
var miscTheme = require('./miscTheme.js');
var recharts = require('recharts');
var index$3 = require('./index-edabce15.js');
var useOutsideClick = require('./useOutsideClick-20d5ca9e.js');
var styled = require('@emotion/styled');
var tslib_es6 = require('./tslib.es6-2c2ed574.js');
require('@mantine/core');
require('./index-59a9827e.js');
require('./index-da3b86cd.js');
require('./Locale-fbe01177.js');
require('./index-b0ce6f8f.js');
require('./constantsDomainLocales.js');
require('./constantsIsProduction.js');
require('./index-af9c3c64.js');
require('./utils-b92a8b1c.js');
require('./index-7ab0b2c3.js');
require('./index-1e5e2223.js');
require('@hhgtech/icons/other');
require('@mantine/hooks');
require('@mantine/carousel');
require('./index-024542ed.js');
require('dayjs');
require('@mantine/notifications');
require('./index-6ce6e395.js');
require('date-fns/locale');
require('./constantsSite.js');
require('./constantsRiskScreener.js');
require('./shared-60ad3e5a.js');
require('classnames');
require('uuid');
require('./useUniqueId-18ea5b53.js');
require('@emotion/react');
require('@hhgtech/icons/core');
require('./index-3d563586.js');
require('@mantine/dates');
require('./index.styles-691de58f.js');
require('./translationsContext-78113889.js');
require('./index-eba09ec0.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const CustomizedAxisTick = (props) => {
    const { x, y, payload, activeWeek } = props;
    if (activeWeek === payload.value) {
        return (React__default["default"].createElement("g", { transform: `translate(${x},${y})` },
            React__default["default"].createElement("circle", { r: 12, fill: props.siteType === 'marryBaby'
                    ? miscTheme.theme.mbColors.pink
                    : miscTheme.theme.colors.primaryBase }),
            React__default["default"].createElement("text", { textAnchor: "middle", alignmentBaseline: "central", fill: miscTheme.theme.colors.white, fontFamily: "Inter", fontWeight: "600", fontSize: "12px" }, payload.value)));
    }
    else {
        return (React__default["default"].createElement("g", { transform: `translate(${x},${y})` },
            React__default["default"].createElement("text", { textAnchor: "middle", alignmentBaseline: "central", fill: miscTheme.theme.colors.gray600, fontFamily: "Inter", fontWeight: "400", fontSize: "12px" }, payload.value)));
    }
};

const StyledTooltip = styled__default["default"].div `
  /* position: absolute; */
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  gap: 4px;

  min-width: 145px;
  max-width: 220px;
  min-height: 50px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* .risk {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: ${miscTheme.theme.colors.yellow600};
    border-radius: 3px;
  } */
  & > * {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .risk {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 2px;
    background: #ffffff;
  }
`;
const StyledChart = styled__default["default"].div `
  position: relative;
  width: 100%;
  .custom-chart-label {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .chart-legend {
    display: flex;
    justify-content: space-between;
  }
`;
const StyledChartLegend = styled__default["default"].div `
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-bottom: 8px;
  & > div {
    display: flex;
    align-items: center;
    gap: 4px;
  }
`;

const LABELS_COLOR = [
    {
        name: 'overweight',
        backgroundColor: miscTheme.theme.colors.yellow50,
        color: miscTheme.theme.colors.yellow900,
    },
    {
        name: 'underweight',
        backgroundColor: miscTheme.theme.colors.yellow50,
        color: miscTheme.theme.colors.yellow900,
    },
    {
        name: 'healthy',
        backgroundColor: miscTheme.theme.colors.green50,
        color: miscTheme.theme.colors.green900,
    },
];
const CustomizedTooltipLabel = (props) => {
    var _a, _b, _c, _d, _e;
    const { payload, active } = props;
    const currentPayload = (_a = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _a === void 0 ? void 0 : _a.payload;
    if (!currentPayload || !currentPayload.toolTipLabel || !active)
        return null;
    const { backgroundColor, color } = React.useMemo(() => LABELS_COLOR.find((per) => per.name === currentPayload.status), [currentPayload === null || currentPayload === void 0 ? void 0 : currentPayload.status]);
    return (React__default["default"].createElement(StyledTooltip, null,
        React__default["default"].createElement("div", null, (_b = currentPayload.toolTipLabel) === null || _b === void 0 ? void 0 :
            _b[0],
            " ", (_c = currentPayload.toolTipLabel) === null || _c === void 0 ? void 0 :
            _c[1]),
        React__default["default"].createElement("div", null,
            ((_d = currentPayload.toolTipLabel) === null || _d === void 0 ? void 0 : _d[2]) && (React__default["default"].createElement(index.Text, { as: "span", size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold" }, (_e = currentPayload.toolTipLabel) === null || _e === void 0 ? void 0 : _e[2])),
            React__default["default"].createElement("div", { className: "risk", style: {
                    backgroundColor,
                } },
                React__default["default"].createElement(index.Text, { size: "n1", color: color }, currentPayload.translatedStatus)))));
};

const generatePregnancyWeightGainChartData = ({ weightByWeek, weightBefore, toolTipLabel, status, activeWeek, t, }) => {
    const key = t(`bmi.result.${status}`);
    const generateAdditionalData = (flag) => {
        return flag === activeWeek
            ? { toolTipLabel, translatedStatus: key, status }
            : {};
    };
    return weightByWeek.map((_data) => (Object.assign({ name: _data.week, min: weightBefore + _data.min, difference: _data.max - _data.min, max: weightBefore + _data.max }, generateAdditionalData(_data.week))));
};

const Chart = ({ weightBefore, weightByWeek, activeWeek, currentWeight, toolTipLabel = [], status, withLine = false, siteType, }) => {
    const { t } = index$1.useTranslations();
    const isMarryBaby = siteType === 'marryBaby';
    const chartData = React.useMemo(() => generatePregnancyWeightGainChartData({
        weightByWeek,
        weightBefore,
        toolTipLabel,
        status,
        activeWeek,
        t,
    }), [weightByWeek, weightBefore, toolTipLabel, status, activeWeek]);
    const [isTooltipActive, setIsTooltipActive] = React.useState(false);
    const ref = React.useRef(null);
    // State for our modal
    // Call hook passing in the ref and a function to call on outside click
    useOutsideClick.useOutsideClick(ref, () => setIsTooltipActive(false));
    return (React__default["default"].createElement(StyledChart, null,
        isMarryBaby ? (React__default["default"].createElement(index$2.MarryBabyText, { type: "bodytext-3", color: miscTheme.theme.mbColors.dark },
            ' ',
            t('babyGrowth.weight'),
            " ",
            t('pregnancyWeightGain.weightInput.desc'))) : (React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray500 },
            t('babyGrowth.weight'),
            " ",
            t('pregnancyWeightGain.weightInput.desc'))),
        Array.isArray(chartData) && chartData.length > 0 && (React__default["default"].createElement(StyledChart, null,
            React__default["default"].createElement(recharts.ResponsiveContainer, { height: 388, className: "chart" },
                React__default["default"].createElement(recharts.AreaChart, { data: chartData, margin: { top: 16, right: 0, left: 0 } },
                    React__default["default"].createElement(recharts.CartesianGrid, { stroke: miscTheme.theme.colors.neutral100 }),
                    React__default["default"].createElement(recharts.Tooltip, { trigger: "click", content: (props) => (React__default["default"].createElement(CustomizedTooltipLabel, Object.assign({ active: !withLine &&
                                isTooltipActive &&
                                typeof activeWeek !== 'undefined' &&
                                typeof currentWeight !== 'undefined' }, props))) }),
                    React__default["default"].createElement(recharts.XAxis, { type: "number", scale: "linear", ticks: Array.from({ length: 40 }, (_, i) => i + 1), dataKey: "name", tickLine: false, tickMargin: 12, tick: (props) => (React__default["default"].createElement(CustomizedAxisTick, Object.assign({}, props, { activeWeek: activeWeek, siteType: siteType }))), domain: ['dataMin', 'dataMax'], interval: 'preserveStartEnd', tickCount: 1, allowDecimals: false }),
                    React__default["default"].createElement(recharts.YAxis, { domain: [
                            (dataMin) => Math.max(dataMin, weightBefore - 10 || dataMin),
                            (dataMax) => {
                                return Math.max(dataMax, weightBefore + 20 || dataMax);
                            },
                        ], type: "number", scale: "auto", interval: "preserveStartEnd", tickLine: false, tickMargin: 7, width: 45, tickCount: 10, allowDecimals: true, tickFormatter: (value) => String(Math.round((value + Number.EPSILON) * 100) / 100), tick: {
                            fontFamily: 'Inter',
                            fontWeight: 400,
                            fontSize: 12,
                            color: miscTheme.theme.colors.gray600,
                        } }),
                    React__default["default"].createElement(recharts.Area, { connectNulls: true, type: "monotone", dataKey: "min", stackId: "1", stroke: "transparent", fill: "transparent" }),
                    React__default["default"].createElement(recharts.Area, { connectNulls: true, type: "monotone", dataKey: "difference", stackId: "1", stroke: "transparent", fill: isMarryBaby
                            ? miscTheme.theme.mbColors.tonePink
                            : miscTheme.theme.colors.primary100 }),
                    typeof activeWeek !== 'undefined' &&
                        typeof currentWeight !== 'undefined' && (React__default["default"].createElement(recharts.ReferenceDot, { onClick: () => setIsTooltipActive(true), x: activeWeek === 0 ? 1 : activeWeek, y: currentWeight, r: 4, shape: React__default["default"].createElement(index$3.CustomReferenceDot, { ref: ref, r: 4 }), fill: isMarryBaby
                            ? miscTheme.theme.mbColors.pink
                            : miscTheme.theme.colors.primaryBase, stroke: isMarryBaby
                            ? miscTheme.theme.mbColors.pink
                            : miscTheme.theme.colors.primaryBase })))),
            React__default["default"].createElement("div", { className: "custom-chart-label" },
                React__default["default"].createElement("i", null),
                isMarryBaby ? (React__default["default"].createElement(index$2.MarryBabyText, { type: "bodytext-3", color: miscTheme.theme.mbColors.dark }, t('pregnancy.week'))) : (React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray500 }, t('pregnancy.week'))))))));
};

const Dot = (_a) => {
    var { color } = _a, rest = tslib_es6.__rest(_a, ["color"]);
    return (React__default["default"].createElement("svg", Object.assign({ width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, rest),
        React__default["default"].createElement("circle", { cx: "4", cy: "4", r: "4", fill: color || miscTheme.theme.colors.primaryBase })));
};
const ChartLegend = ({ idealWeight, siteType }) => {
    const { t } = index$1.useTranslations();
    const isMarryBaby = siteType === 'marryBaby';
    return (React__default["default"].createElement(StyledChartLegend, null,
        React__default["default"].createElement("div", null, isMarryBaby ? (React__default["default"].createElement(React__default["default"].Fragment, null,
            React__default["default"].createElement(Dot, { color: miscTheme.theme.mbColors.lightPink }),
            React__default["default"].createElement(index$2.MarryBabyText, { type: "bodytext-3", color: miscTheme.theme.mbColors.dark },
                t('pregnancyTool.weightSuggested'),
                ' ',
                React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray800, weight: "bold", as: "span" }, idealWeight)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
            React__default["default"].createElement(Dot, { color: miscTheme.theme.colors.primary100 }),
            React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray600 },
                React__default["default"].createElement(index.Text, { size: "n1", as: "span" },
                    t('pregnancyTool.weightSuggested'),
                    ' '),
                React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray800, weight: "bold", as: "span" }, idealWeight))))),
        React__default["default"].createElement("div", null, isMarryBaby ? (React__default["default"].createElement(React__default["default"].Fragment, null,
            React__default["default"].createElement(Dot, { color: miscTheme.theme.mbColors.pink }),
            React__default["default"].createElement(index$2.MarryBabyText, { type: "bodytext-3", color: miscTheme.theme.mbColors.dark }, t('pwg.placeholder.weight')))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
            React__default["default"].createElement(Dot, null),
            React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray600 }, t('pwg.placeholder.weight')))))));
};

const StyledPregnancyWeightGainChart = styled__default["default"].div `
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  width: 100%;
  gap: 24px;
  border: 1px solid ${miscTheme.theme.colors.neutral100};
  border-radius: 8px;
  .chart-header {
    text-align: center;
  }
  > div {
    width: 100%;
  }
`;

const PregnancyWeightGainChart = ({ chartProps, pillCarouselProps, idealWeight, description, siteType, }) => {
    const { t } = index$1.useTranslations();
    const isMarryBaby = siteType === 'marryBaby';
    return (React__default["default"].createElement(StyledPregnancyWeightGainChart, null,
        React__default["default"].createElement("div", { className: "chart-header" },
            isMarryBaby ? (React__default["default"].createElement(index$2.MarryBabyHeading, { type: "h3", color: miscTheme.theme.mbColors.dark }, t('pregnancyTool.weightSuggested'))) : (React__default["default"].createElement(index.Text, { size: "s1", weight: "semiBold", color: miscTheme.theme.colors.gray800 }, t('pregnancyTool.weightSuggested'))),
            description && description),
        React__default["default"].createElement(index$4.PillCarousel, Object.assign({}, pillCarouselProps)),
        React__default["default"].createElement("div", null,
            React__default["default"].createElement(ChartLegend, { idealWeight: idealWeight, siteType: siteType }),
            React__default["default"].createElement(Chart, Object.assign({}, chartProps, { siteType: siteType })))));
};

exports.PregnancyWeightGainChart = PregnancyWeightGainChart;
