import { _ as __rest } from './tslib.es6-ab63fd84.js';
import React__default, { useMemo, useState, useEffect } from 'react';
import './index-91c6a49c.js';
import styled from '@emotion/styled';
import { C as CommonGAssets } from './index-43584299.js';
import { theme } from './miscTheme.js';
import { I as ImageWrap } from './index-74fcf0aa.js';
import { T as Text } from './index-579b84f2.js';
import { L as LOCALE } from './Locale-87b46912.js';
import { f as CentralCarousel } from './index-c3177e04.js';

const StyledIconContainer = styled.div `
  display: inline-flex;
  overflow: hidden;
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;

  border: 1px solid #e4e8ec;
  background-color: ${(props) => props.backgroundColor || theme.colors.white};
  border-radius: ${(props) => props.borderRadius || '50%'};
  & > * {
    width: ${(props) => props.iconSize}px;
    height: ${(props) => props.iconSize}px;
  }
`;
const StyledPillContainer = styled.div `
  display: inline-block;
  height: 108px;
  background-color: ${theme.colors.white};
  border-radius: 60px;
  cursor: pointer;
  &.selected-week-pill {
    background-color: ${theme.colors.pink100};
  }

  & > div:first-child {
    margin: 4px 4px 0;
  }

  & > p {
    margin-top: 8px;
    text-align: center;
  }

  & > * {
    pointer-events: none;
  }
`;

const LONG_TITLE_LOCALE = [LOCALE.Myanmar, LOCALE.Taiwan];
const Pill = (_a) => {
    var { icon, name, className, locale = 'en-PH', dataEventCategory, dataEventAction, dataEventLabel, onSelect } = _a, rest = __rest(_a, ["icon", "name", "className", "locale", "dataEventCategory", "dataEventAction", "dataEventLabel", "onSelect"]);
    const isSelected = useMemo(() => className === null || className === void 0 ? void 0 : className.includes('selected-week-pill'), [className]);
    return (React__default.createElement(StyledPillContainer, Object.assign({ onClick: onSelect, className: className
            ? 'week-pill'.concat(' non-pointer-event-child ', className)
            : 'week-pill non-pointer-event-child', "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest),
        React__default.createElement(StyledIconContainer, { size: 64, iconSize: 40, backgroundColor: theme.colors.white },
            React__default.createElement(ImageWrap, { src: icon || CommonGAssets.getAssetPath('week_default.png'), alt: `week ${name}` })),
        isSelected ? (React__default.createElement(Text, Object.assign({ type: "semiBold", size: "n1", color: theme.colors.gray800 }, (LONG_TITLE_LOCALE.includes(locale) && {
            style: { fontSize: '10px' },
        })), name)) : (React__default.createElement(Text, Object.assign({ size: "n1", color: theme.colors.gray600 }, (LONG_TITLE_LOCALE.includes(locale) && {
            style: { fontSize: '10px' },
        })), name))));
};

const StyledPill = styled(Pill) `
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
`;
const StyledSlide = styled(CentralCarousel.Slide) `
  cursor: pointer;
  > div * {
    pointer-events: none;
  }
`;
const StyledCarousel = styled(CentralCarousel) `
  .centerred-pill-wrapper {
    padding: 16px 0;
  }
`;

/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const PillCarousel = (_a) => {
    var { data, isMobile, onSlideChange, pillProps, locale = LOCALE.Vietnam, blurFromIndex, blurLength } = _a, rest = __rest(_a, ["data", "isMobile", "onSlideChange", "pillProps", "locale", "blurFromIndex", "blurLength"]);
    const sliderProps = {
        withControls: !isMobile,
        slideGap: 16,
        blurFromCenter: true,
        blurFromIndex: blurFromIndex || (isMobile ? 2 : 4),
        blurLength: blurLength || (isMobile ? 1 : 3),
        onSlideChange,
    };
    const [currentUrl, setCurrentUrl] = useState('');
    useEffect(() => {
        setCurrentUrl(window.location.href);
    }, []);
    return (React__default.createElement(StyledCarousel, Object.assign({}, sliderProps, rest, { selectSlideWhenClick: true, previousControlIcon: React__default.createElement(Arrow, { currentUrl: currentUrl }), nextControlIcon: React__default.createElement(Arrow, { currentUrl: currentUrl, isRight: true }) }), (centerSlide) => data.map((pill, idx) => (React__default.createElement(StyledSlide, Object.assign({ key: idx, onClick: onSlideChange, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Click", "data-event-label": currentUrl, innerSlideProps: {
            'data-event-category': 'Health Tool',
            'data-event-action': 'Pregnancy Week Click',
            'data-event-label': currentUrl,
        } }, pillProps),
        React__default.createElement("div", { className: "centerred-pill-wrapper" },
            React__default.createElement(StyledPill, { "data-event-category": "Health Tool", "data-event-action": "Fetal Week Click", "data-event-label": currentUrl, locale: locale, name: pill.name, icon: pill.icon, className: idx === centerSlide
                    ? 'selected-week-pill pointer-event-child-none'
                    : 'pointer-event-child-none' })))))));
};
const Arrow = ({ isRight, currentUrl, }) => {
    return (React__default.createElement("svg", { viewBox: "0 0 15 15", fill: "none", width: "16", height: "16", style: isRight
            ? { transform: 'rotate(-90deg)' }
            : { transform: 'rotate(90deg)' }, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Arrow Click", "data-event-label": currentUrl, className: "pointer-event-child-none" },
        React__default.createElement("path", { d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" })));
};

export { PillCarousel as P };
