import React__default, { useMemo, useState, useRef } from 'react';
import { M as MarryBabyText, a as MarryBabyHeading } from './index-41a88cf1.js';
import { T as Text } from './index-d0a1200e.js';
import { P as PillCarousel } from './index-a55c76ce.js';
import { u as useTranslations } from './index-960c3169.js';
import { theme } from './miscTheme.js';
import { ResponsiveContainer, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis, Area, ReferenceDot } from 'recharts';
import { C as CustomReferenceDot } from './index-a55fa240.js';
import { a as useOutsideClick } from './useOutsideClick-10e74687.js';
import styled from '@emotion/styled';
import { _ as __rest } from './tslib.es6-ab63fd84.js';
import '@mantine/core';
import './index-38e03570.js';
import './index-91c6a49c.js';
import './Locale-87b46912.js';
import './index-43584299.js';
import './constantsDomainLocales.js';
import './constantsIsProduction.js';
import './index-74fcf0aa.js';
import './utils-32d7d5af.js';
import './index-579b84f2.js';
import './index-c3177e04.js';
import '@hhgtech/icons/other';
import '@mantine/hooks';
import '@mantine/carousel';
import './index-4e6b8a2b.js';
import 'dayjs';
import '@mantine/notifications';
import './index-a8162282.js';
import 'date-fns/locale';
import './constantsSite.js';
import './constantsRiskScreener.js';
import './shared-3674950a.js';
import 'classnames';
import 'uuid';
import './useUniqueId-6d89c40a.js';
import '@emotion/react';
import '@hhgtech/icons/core';
import './index-f71a880f.js';
import '@mantine/dates';
import './index.styles-3ba274d2.js';
import './translationsContext-4de1415e.js';
import './index-f21110d2.js';

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

const StyledTooltip = styled.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: ${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.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.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: theme.colors.yellow50,
        color: theme.colors.yellow900,
    },
    {
        name: 'underweight',
        backgroundColor: theme.colors.yellow50,
        color: theme.colors.yellow900,
    },
    {
        name: 'healthy',
        backgroundColor: theme.colors.green50,
        color: 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 } = useMemo(() => LABELS_COLOR.find((per) => per.name === currentPayload.status), [currentPayload === null || currentPayload === void 0 ? void 0 : currentPayload.status]);
    return (React__default.createElement(StyledTooltip, null,
        React__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.createElement("div", null,
            ((_d = currentPayload.toolTipLabel) === null || _d === void 0 ? void 0 : _d[2]) && (React__default.createElement(Text, { as: "span", size: "s3", color: theme.colors.gray800, weight: "semiBold" }, (_e = currentPayload.toolTipLabel) === null || _e === void 0 ? void 0 : _e[2])),
            React__default.createElement("div", { className: "risk", style: {
                    backgroundColor,
                } },
                React__default.createElement(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 } = useTranslations();
    const isMarryBaby = siteType === 'marryBaby';
    const chartData = useMemo(() => generatePregnancyWeightGainChartData({
        weightByWeek,
        weightBefore,
        toolTipLabel,
        status,
        activeWeek,
        t,
    }), [weightByWeek, weightBefore, toolTipLabel, status, activeWeek]);
    const [isTooltipActive, setIsTooltipActive] = useState(false);
    const ref = useRef(null);
    // State for our modal
    // Call hook passing in the ref and a function to call on outside click
    useOutsideClick(ref, () => setIsTooltipActive(false));
    return (React__default.createElement(StyledChart, null,
        isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "bodytext-3", color: theme.mbColors.dark },
            ' ',
            t('babyGrowth.weight'),
            " ",
            t('pregnancyWeightGain.weightInput.desc'))) : (React__default.createElement(Text, { size: "n1", color: theme.colors.gray500 },
            t('babyGrowth.weight'),
            " ",
            t('pregnancyWeightGain.weightInput.desc'))),
        Array.isArray(chartData) && chartData.length > 0 && (React__default.createElement(StyledChart, null,
            React__default.createElement(ResponsiveContainer, { height: 388, className: "chart" },
                React__default.createElement(AreaChart, { data: chartData, margin: { top: 16, right: 0, left: 0 } },
                    React__default.createElement(CartesianGrid, { stroke: theme.colors.neutral100 }),
                    React__default.createElement(Tooltip, { trigger: "click", content: (props) => (React__default.createElement(CustomizedTooltipLabel, Object.assign({ active: !withLine &&
                                isTooltipActive &&
                                typeof activeWeek !== 'undefined' &&
                                typeof currentWeight !== 'undefined' }, props))) }),
                    React__default.createElement(XAxis, { type: "number", scale: "linear", ticks: Array.from({ length: 40 }, (_, i) => i + 1), dataKey: "name", tickLine: false, tickMargin: 12, tick: (props) => (React__default.createElement(CustomizedAxisTick, Object.assign({}, props, { activeWeek: activeWeek, siteType: siteType }))), domain: ['dataMin', 'dataMax'], interval: 'preserveStartEnd', tickCount: 1, allowDecimals: false }),
                    React__default.createElement(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: theme.colors.gray600,
                        } }),
                    React__default.createElement(Area, { connectNulls: true, type: "monotone", dataKey: "min", stackId: "1", stroke: "transparent", fill: "transparent" }),
                    React__default.createElement(Area, { connectNulls: true, type: "monotone", dataKey: "difference", stackId: "1", stroke: "transparent", fill: isMarryBaby
                            ? theme.mbColors.tonePink
                            : theme.colors.primary100 }),
                    typeof activeWeek !== 'undefined' &&
                        typeof currentWeight !== 'undefined' && (React__default.createElement(ReferenceDot, { onClick: () => setIsTooltipActive(true), x: activeWeek === 0 ? 1 : activeWeek, y: currentWeight, r: 4, shape: React__default.createElement(CustomReferenceDot, { ref: ref, r: 4 }), fill: isMarryBaby
                            ? theme.mbColors.pink
                            : theme.colors.primaryBase, stroke: isMarryBaby
                            ? theme.mbColors.pink
                            : theme.colors.primaryBase })))),
            React__default.createElement("div", { className: "custom-chart-label" },
                React__default.createElement("i", null),
                isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "bodytext-3", color: theme.mbColors.dark }, t('pregnancy.week'))) : (React__default.createElement(Text, { size: "n1", color: theme.colors.gray500 }, t('pregnancy.week'))))))));
};

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

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

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

export { PregnancyWeightGainChart };
