import { _ as __rest } from './tslib.es6-ab63fd84.js';
import React__default, { useState, useRef, useMemo, useEffect } from 'react';
import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
import { createStyles, rem, Box, Flex } from '@mantine/core';
import { R as Radio } from './index-c3177e04.js';
import '@mantine/dates';
import './index-a8162282.js';
import './index-91c6a49c.js';
import { C as CommonGAssets } from './index-43584299.js';
import './index-4e6b8a2b.js';
import { T as Text } from './index-d0a1200e.js';
import './index-f71a880f.js';
import './index-38e03570.js';
import './index.styles-3ba274d2.js';
import { u as useTranslations } from './index-960c3169.js';
import '@mantine/hooks';
import './utils-32d7d5af.js';
import './index-f21110d2.js';

const sizeMap = {
    lg: {
        height: 48,
    },
    md: {
        height: 40,
    },
    sm: {
        height: 32,
    },
    xs: {
        height: 32,
    },
};
var useStyles = createStyles((theme, { type, gap, size }) => {
    const isMarryBaby = theme.other.template === 'mb';
    const base = sizeMap[size] || {};
    const height = base.height;
    return {
        root: {},
        wrapper: Object.assign({ gap: rem(gap || 8) }, (type === 'radio' && {
            justifyContent: 'flex-end',
            gap: rem(gap || 24),
        })),
        groupErr: {
            fontSize: rem(14),
        },
        itemRoot: Object.assign({}, (type === 'button'
            ? {
                flexGrow: 1,
                width: '50%',
                '&[data-checked="true"]': {
                    '.mantine-Radio-label': {
                        borderColor: theme.fn.primaryColor(),
                    },
                },
            }
            : type === 'radio'
                ? { padding: `${rem(10)} 0`, margin: 0 }
                : {})),
        itemLabelWrapper: {
            padding: 0,
            width: '100%',
        },
        itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
            ? {
                position: 'relative',
                padding: `${rem(2)} ${rem(16)}`,
                border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
                backgroundColor: '#fff',
                borderRadius: rem(isMarryBaby ? 16 : 4),
                cursor: 'pointer',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height,
                '&[data-disabled="true"]': {
                    background: theme.colors.gray[1],
                    color: `${theme.colors.gray[4]} !important`,
                    img: {
                        opacity: 0.5,
                    },
                },
                img: {
                    height: rem(size === 'lg' ? 26 : 22),
                },
            }
            : type === 'radio'
                ? { fontSize: rem(14) }
                : {})),
        itemInner: Object.assign(Object.assign({}, (type === 'button' && {
            display: 'none',
        })), (type === 'radio' && {
            alignSelf: 'center',
        })),
        itemBody: Object.assign({}, (type === 'radio' && {
            alignItems: 'center',
        })),
    };
});

const GenderOptionControl = (_a) => {
    var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
        male: 'male',
        female: 'female',
    }, type = 'button', hideLabel, labelTextProps, labelText, gap, size = 'md', LabelWrapper } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel", "labelTextProps", "labelText", "gap", "size", "LabelWrapper"]);
    const { t } = useTranslations();
    const { classes, cx, theme } = useStyles({ type, gap, size }, {
        name: 'GenderOptionControl',
        styles,
    });
    const isMarryBaby = theme.other.template === 'mb';
    const [availableValue, setAvailableValue] = useState();
    const ref = useRef(null);
    const labelProps = !LabelWrapper
        ? Object.assign({ as: 'label', size: 'p2', weight: 'semiBold', variant: 'primary' }, labelTextProps) : {};
    const LabelComponent = LabelWrapper || Text;
    const genderOptions = useMemo(() => [
        {
            value: genderValue.male,
            label: isBaby ? t('gender.boy') : t('gender.male'),
            icon: isBaby ? (isMarryBaby ? (React__default.createElement(BabyBoyMB, null)) : (CommonGAssets.getAssetPath('health-tools/boy-icon.svg'))) : (CommonGAssets.getAssetPath('health-tools/male-icon.svg')),
        },
        {
            value: genderValue.female,
            label: isBaby ? t('gender.girl') : t('gender.female'),
            icon: isBaby ? (isMarryBaby ? (React__default.createElement(BabyGirlMB, null)) : (CommonGAssets.getAssetPath('health-tools/girl-icon.svg'))) : (CommonGAssets.getAssetPath('health-tools/female-icon.svg')),
        },
    ], []);
    useEffect(() => {
        setAvailableValue(availableValueInit);
    }, [availableValueInit]);
    return (React__default.createElement(Box, { ref: ref, className: classes.root },
        React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default.createElement(LabelComponent, Object.assign({ id: "gender-option-control-label" }, labelProps), label ||
                (isBaby
                    ? t('tools.selectBabyGender')
                    : t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {
                error: classes.groupErr,
            } }, (type === 'radio' && {
            error: null,
        })),
            React__default.createElement(Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default.createElement(Radio, Object.assign({ className: "gender-item", size: "sm", classNames: {
                    root: classes.itemRoot,
                    labelWrapper: classes.itemLabelWrapper,
                    label: classes.itemLabel,
                    inner: classes.itemInner,
                    body: classes.itemBody,
                }, key: i.value, value: i.value }, (availableValue &&
                i.value !== availableValue && {
                disabled: true,
            }), { label: React__default.createElement(Flex, { gap: rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
                    type === 'button' &&
                        (typeof i.icon === 'string' ? (React__default.createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" })) : (i.icon)),
                    React__default.createElement(Text, Object.assign({ size: "p3" }, labelText), i.label)) }))))))));
};

export { GenderOptionControl as G };
