'use strict';

var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var React = require('react');
var other = require('@hhgtech/icons/other');
var core = require('@mantine/core');
var index$2 = require('./index-1e5e2223.js');
require('@mantine/dates');
require('./index-6ce6e395.js');
require('./index-da3b86cd.js');
var index$1 = require('./index-b0ce6f8f.js');
require('./index-024542ed.js');
var index$3 = require('./index-a31ed3e1.js');
require('./index-3d563586.js');
require('./index-59a9827e.js');
require('./index.styles-691de58f.js');
var index = require('./index-3643ff1b.js');
require('@mantine/hooks');
require('./utils-b92a8b1c.js');
require('./index-eba09ec0.js');

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

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

const sizeMap = {
    lg: {
        height: 48,
    },
    md: {
        height: 40,
    },
    sm: {
        height: 32,
    },
    xs: {
        height: 32,
    },
};
var useStyles = core.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: core.rem(gap || 8) }, (type === 'radio' && {
            justifyContent: 'flex-end',
            gap: core.rem(gap || 24),
        })),
        groupErr: {
            fontSize: core.rem(14),
        },
        itemRoot: Object.assign({}, (type === 'button'
            ? {
                flexGrow: 1,
                width: '50%',
                '&[data-checked="true"]': {
                    '.mantine-Radio-label': {
                        borderColor: theme.fn.primaryColor(),
                    },
                },
            }
            : type === 'radio'
                ? { padding: `${core.rem(10)} 0`, margin: 0 }
                : {})),
        itemLabelWrapper: {
            padding: 0,
            width: '100%',
        },
        itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
            ? {
                position: 'relative',
                padding: `${core.rem(2)} ${core.rem(16)}`,
                border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
                backgroundColor: '#fff',
                borderRadius: core.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: core.rem(size === 'lg' ? 26 : 22),
                },
            }
            : type === 'radio'
                ? { fontSize: core.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 = tslib_es6.__rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel", "labelTextProps", "labelText", "gap", "size", "LabelWrapper"]);
    const { t } = index.useTranslations();
    const { classes, cx, theme } = useStyles({ type, gap, size }, {
        name: 'GenderOptionControl',
        styles,
    });
    const isMarryBaby = theme.other.template === 'mb';
    const [availableValue, setAvailableValue] = React.useState();
    const ref = React.useRef(null);
    const labelProps = !LabelWrapper
        ? Object.assign({ as: 'label', size: 'p2', weight: 'semiBold', variant: 'primary' }, labelTextProps) : {};
    const LabelComponent = LabelWrapper || index$3.Text;
    const genderOptions = React.useMemo(() => [
        {
            value: genderValue.male,
            label: isBaby ? t('gender.boy') : t('gender.male'),
            icon: isBaby ? (isMarryBaby ? (React__default["default"].createElement(other.BabyBoyMB, null)) : (index$1.CommonGAssets.getAssetPath('health-tools/boy-icon.svg'))) : (index$1.CommonGAssets.getAssetPath('health-tools/male-icon.svg')),
        },
        {
            value: genderValue.female,
            label: isBaby ? t('gender.girl') : t('gender.female'),
            icon: isBaby ? (isMarryBaby ? (React__default["default"].createElement(other.BabyGirlMB, null)) : (index$1.CommonGAssets.getAssetPath('health-tools/girl-icon.svg'))) : (index$1.CommonGAssets.getAssetPath('health-tools/female-icon.svg')),
        },
    ], []);
    React.useEffect(() => {
        setAvailableValue(availableValueInit);
    }, [availableValueInit]);
    return (React__default["default"].createElement(core.Box, { ref: ref, className: classes.root },
        React__default["default"].createElement(index$2.Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default["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["default"].createElement(core.Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default["default"].createElement(index$2.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["default"].createElement(core.Flex, { gap: core.rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
                    type === 'button' &&
                        (typeof i.icon === 'string' ? (React__default["default"].createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" })) : (i.icon)),
                    React__default["default"].createElement(index$3.Text, Object.assign({ size: "p3" }, labelText), i.label)) }))))))));
};

exports.GenderOptionControl = GenderOptionControl;
