import React__default, { useState, useEffect, useRef } from 'react';
import { B as Button } from './index-96c62ad5.js';
import { T as Text } from './index-d0a1200e.js';
import { H as Heading } from './index-afe90ec2.js';
import { I as Input } from './index-d9b5d0ac.js';
import { T as TextArea } from './index-fc085ad1.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';

const StyledSurveyQuestionCard = styled.div `
  padding: 1rem;
  background: ${theme.colors.neutral100};
  .survey-inner-wrapper {
    padding: 1.25rem 1rem 1.5rem;
    background: ${theme.colors.white};
    border-radius: ${theme.borderRadius};
    .survey-header {
      border-bottom: 1px solid #dbdfe5;
      margin-bottom: 12px;
      .survey-header-text {
        color: ${theme.colors.gray500};
      }
    }

    .survey-contact-submit {
      width: 100%;
      margin-bottom: 1.5rem;
    }
    .term-policy-container {
      width: 70%;
      min-width: 210px;
      max-width: 100%;
      margin: 0 auto 1.5rem;
      text-align: center;
    }

    .survey-progress-wrapper {
      width: calc(100% + 2rem);
      height: 4px;
      margin-bottom: 1rem;
      margin-left: -1rem;
      background: #e4e8ec;
      .survey-progress {
        width: 100%;
        height: 100%;
        background: #00b16a;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform ease-in-out 0.3s;
      }
    }

    .survey-button-wrapper {
      display: flex;
      justify-content: flex-end;
      button {
        justify-content: center;
        &[data-has-icon='true'] {
          svg {
            width: 10px;
            height: 10px;
            margin-right: 10px;
            vertical-align: unset;
          }
        }
        &.survey-next-button {
          &[data-has-icon='true'] {
            svg {
              margin-right: 0;
              margin-left: 10px;
            }
          }
        }
      }
      &[data-center='true'] {
        justify-content: center;
        button:only-child {
          width: 200px;
          max-width: 80%;
        }
      }
      .survey-prev-button {
        margin-right: 0.5rem;
      }
    }
  }
`;
const StyledSurveyRadio = styled.div `
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;

  input {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: solid 1px ${theme.colors.gray500};
    margin-right: 8px;
    border-radius: 100%;
    cursor: inherit;
    transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;

    &:hover,
    &:active {
      border-color: ${theme.colors.primaryBase};
      box-shadow: 0 0 2px 2px ${theme.colors.primary600};
    }

    &:checked {
      display: flex;
      align-items: center;
      justify-content: center;
      border-color: ${theme.colors.primaryBase};
      &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        //left: 3px;
        //position: absolute;
        //top: 4px;
        background-color: ${theme.colors.primaryBase};
        border-radius: 50%;
        content: '';
        transform: translate(-50%, -50%);
      }
    }
  }

  label {
    width: calc(100% - 24px);
    cursor: inherit;
    font-weight: ${theme.sizes.fwRegular};
  }

  &[data-disabled='true'] {
    color: ${theme.colors.gray300};
    cursor: not-allowed;
    input {
      border-color: ${theme.colors.gray300};

      &:hover {
        border-color: ${theme.colors.gray300};
        box-shadow: none;
      }
    }
  }

  padding: 16px 20px;
  border: 0.5px solid transparent;
  background: #fafafa;
  border-radius: ${theme.borderRadius};
  &[data-checked='true'] {
    border: 0.5px solid #2d87f3;
    background: #f7f9fc;
  }
  input {
    border: solid 2px #737373;
    margin-right: 0;
    background: white;
    &[type='checkbox'] {
      &:checked {
        border: 0;
        background: ${theme.colors.primaryBase}
          url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z' fill='%232D87F3' stroke='%232D87F3' stroke-width='2'/%3E%3Cpath d='M15.5714 8L9.67857 14L7 11.2727' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
          no-repeat center center;
        &:after {
          display: none;
        }
      }
    }
  }

  &[data-has-image='true'] {
    position: relative;
    display: block;
    padding: 12px;
    input {
      position: absolute;
      top: 20px;
      right: 20px;
    }
    .choice-image-wrapper {
      position: relative;
      padding-top: 56.25%;
      margin-bottom: 0.75rem;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: ${theme.borderRadius};
        object-fit: cover;
      }
    }
  }
`;
const StyledSurveyThankyouCard = styled.div `
  position: relative;
  width: 100%;
  padding-top: min(400px, 100%);
  .survey-thankyou-wrapper-inner {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .survey-thankyou-icon {
      width: 36%;
      max-height: 50%;
      margin-bottom: 1.5rem;
    }
    .survey-thankyou-title {
      margin-bottom: 1rem;
      text-align: center;
    }
    .survey-thankyou-subtitle {
      text-align: center;
      > * {
        text-align: center;
      }
    }
  }
`;
const StyledSurveyQuestionContent = styled.div `
  .survey-question-text-wrapper {
    margin-bottom: 24px;
    .survey-question-title {
      margin-bottom: 4px;
    }
    .survey-question-subtitle,
    .survey-question-description {
      color: ${theme.colors.gray500};
    }
  }
  .survey-question-image {
    width: 100%;
    margin-bottom: 12px;
    border-radius: ${theme.borderRadius};
  }

  .survey-question-answer-wrapper {
    margin-bottom: 1.5rem;
    .survey-question-options-wrapper {
      display: grid;
      grid-gap: 0.5rem;
      grid-template-columns: 1fr;
      &[data-has-image='true'] {
        grid-gap: 0.8rem;
        grid-template-columns: 1fr 1fr;
      }
      .survey-question-option-item {
        label {
          color: #262626;
          font-size: 16px;
          font-style: normal;
          font-weight: normal;
          line-height: 24px;
        }
      }
    }
    .survey-contact-input {
      margin-bottom: 1rem;
      &:first-child {
        margin-top: 1rem;
      }
      label {
        font-weight: 700;
      }
      input {
        margin-top: 6px;
      }
    }
  }
`;

const SurveyRadio = ({ size = 'small', label, name, checked, value, className, isDisabled = false, onChange, hasImage, inputType, image, }) => {
    return (React__default.createElement(StyledSurveyRadio, { "data-disabled": isDisabled, className: className, "data-size": size, "data-checked": checked, onClick: () => {
            onChange(value);
        }, "data-has-image": hasImage },
        hasImage && (React__default.createElement("div", { className: "choice-image-wrapper" }, image && React__default.createElement("img", { src: image, loading: "lazy" }))),
        React__default.createElement("label", { onClick: (e) => {
                e.preventDefault();
            }, htmlFor: `${name}-${value}` }, label),
        React__default.createElement("input", { type: inputType, checked: checked, name: name, id: `${name}-${value}`, value: value, readOnly: true })));
};

const SurveyQuestionContent = ({ question, description, onOptionsChange, onTextOptionsChange, style, className, }) => {
    const { type, title, subtitle, image, textOptions: textOptionsProps, options, name, is_multi_select, } = question;
    const optionHasImage = !!(options === null || options === void 0 ? void 0 : options.some((o) => o.image));
    const [selectedOptions, setSelectedOptions] = useState([]);
    const [textOptions, setTextOptions] = useState(() => (textOptionsProps === null || textOptionsProps === void 0 ? void 0 : textOptionsProps.slice()) || []);
    useEffect(() => {
        onOptionsChange && onOptionsChange(selectedOptions.slice());
    }, [!!onOptionsChange, selectedOptions]);
    useEffect(() => {
        onTextOptionsChange && onTextOptionsChange(textOptions);
    }, [!!onTextOptionsChange, textOptions]);
    return (React__default.createElement(StyledSurveyQuestionContent, { className: className, style: style },
        React__default.createElement("div", { className: "survey-question-text-wrapper" },
            title && (React__default.createElement(Heading, { "data-nosubtitle": !subtitle, className: "survey-question-title", tag: "h4" }, title)),
            subtitle && (React__default.createElement(Text, { className: "survey-question-subtitle", size: "p2" }, subtitle)),
            description && (React__default.createElement(Text, { className: "survey-question-description", size: "p2" }, description))),
        image && (React__default.createElement("img", { src: image, className: "survey-question-image", loading: "lazy" })),
        React__default.createElement("div", { className: "survey-question-answer-wrapper" },
            type === 'radio' && (React__default.createElement("div", { "data-has-image": optionHasImage, className: "survey-question-options-wrapper" }, options.map((option) => {
                var _a;
                return (React__default.createElement(SurveyRadio, { inputType: "radio", label: option.label, name: name, key: `${name}-${option.value}`, checked: ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) === option.value, value: option.value, onChange: (v) => {
                        setSelectedOptions([options.find((o) => o.value === v)]);
                    }, className: "survey-question-option-item", image: option.image, hasImage: optionHasImage }));
            }))),
            type === 'checkbox' && (React__default.createElement("div", { "data-has-image": optionHasImage, className: "survey-question-options-wrapper" }, options.map((option) => (React__default.createElement(SurveyRadio, { inputType: "checkbox", label: option.label, name: name, key: `${name}-${option.value}`, checked: !!selectedOptions.find((o) => o.value === option.value), value: option.value, onChange: () => {
                    const foundIndex = selectedOptions.findIndex((o) => o.value === option.value);
                    if (foundIndex >= 0) {
                        setSelectedOptions((_old) => {
                            _old.splice(foundIndex, 1);
                            return _old.slice();
                        });
                    }
                    else {
                        if (!is_multi_select) {
                            setSelectedOptions([option]);
                        }
                        else {
                            setSelectedOptions((_old) => _old.concat(option).slice());
                        }
                    }
                }, className: "survey-question-option-item survey-option-radio", image: option.image, hasImage: optionHasImage }))))),
            type === 'textbox' &&
                textOptions.map((option, index) => option.isTextArea ? (React__default.createElement(TextArea, { key: index, placeholder: option.placeholder, height: '150px', value: option.value, onChange: (t) => setTextOptions((_o) => {
                        _o[index].value = t;
                        return _o.slice();
                    }) })) : (React__default.createElement(Input, { key: index, value: option.value, name: option.name, size: "md", className: "survey-contact-input", label: option.label, placeholder: option.placeholder, onChange: (v) => {
                        setTextOptions((_o) => {
                            _o[index].value = v;
                            return _o.slice();
                        });
                    }, type: option.type }))))));
};

var NodeMultipleOptions;
(function (NodeMultipleOptions) {
    NodeMultipleOptions[NodeMultipleOptions["UNLIMITED"] = 0] = "UNLIMITED";
    NodeMultipleOptions[NodeMultipleOptions["EXACT_NUMBER"] = 1] = "EXACT_NUMBER";
    NodeMultipleOptions[NodeMultipleOptions["RANGE"] = 2] = "RANGE";
})(NodeMultipleOptions || (NodeMultipleOptions = {}));
const SurveyQuestionCard = ({ className, headerText, style, question, termAndPolicyText, prevText, nextText, isContactForm, isDisableNext, isDisablePrev, onPrevClick, onNextClick, isSubmitButton, isButtonCenter, progress, descriptionText, }) => {
    var _a, _b, _c;
    // const [currentQuestionIndex, setQuestionIndex] = useState(0)
    const [answer, setAnswer] = useState([]);
    const { is_multi_select, multi_select_option, from, to } = question;
    // const currentQuestion = questions[currentQuestionIndex]
    // const currentAnswer = answers[currentQuestionIndex]
    const currentType = question === null || question === void 0 ? void 0 : question.type;
    const submitDisabled = (currentType === 'checkbox' &&
        ((_a = question.options) === null || _a === void 0 ? void 0 : _a.length) &&
        (!answer ||
            answer.length === 0 ||
            (is_multi_select &&
                multi_select_option === NodeMultipleOptions.RANGE &&
                (answer.length < from || answer.length > to)) ||
            (is_multi_select &&
                multi_select_option === NodeMultipleOptions.EXACT_NUMBER &&
                answer.length !== from))) ||
        (currentType === 'radio' &&
            ((_b = question.options) === null || _b === void 0 ? void 0 : _b.length) &&
            (!answer || answer.length === 0)) ||
        (currentType === 'textbox' &&
            ((_c = question.textOptions) === null || _c === void 0 ? void 0 : _c.length) &&
            (answer.length < question.textOptions.length ||
                answer.some((a) => !a.value)));
    const normalizedProgress = typeof progress === 'number'
        ? progress > 1
            ? 1
            : progress < 0
                ? 0
                : Number(progress.toFixed(2))
        : -1;
    const formRef = useRef(null);
    const reportValidity = () => {
        if (currentType === 'textbox') {
            // report validity for input elements
            return formRef.current.reportValidity();
        }
        return true;
    };
    return (React__default.createElement(StyledSurveyQuestionCard, { className: className, style: style },
        React__default.createElement("div", { className: "survey-inner-wrapper" },
            headerText && (React__default.createElement("div", { className: "survey-header" },
                React__default.createElement(Text, { className: "survey-header-text", size: "c2" }, headerText))),
            React__default.createElement("form", { ref: formRef, onSubmit: (e) => e.preventDefault() },
                React__default.createElement(SurveyQuestionContent, { question: question, description: descriptionText, onOptionsChange: (options) => {
                        setAnswer(options);
                    }, onTextOptionsChange: (text) => {
                        setAnswer(text);
                    } })),
            isContactForm && nextText && (React__default.createElement(Button, { className: "survey-contact-submit", size: "lg", isDisabled: isDisableNext || submitDisabled, onClick: () => reportValidity() && onNextClick && onNextClick(answer) }, nextText)),
            termAndPolicyText && (React__default.createElement("div", { className: "term-policy-container" }, termAndPolicyText)),
            typeof progress === 'number' && (React__default.createElement("div", { className: "survey-progress-wrapper" },
                React__default.createElement("div", { className: "survey-progress", style: {
                        transform: `scaleX(${normalizedProgress})`,
                    } }))),
            (prevText || nextText) && (React__default.createElement("div", { "data-center": isButtonCenter, className: "survey-button-wrapper" },
                prevText && (React__default.createElement(Button, { className: "survey-prev-button", size: "lg", color: isDisablePrev ? 'primary' : 'secondary', isDisabled: isDisablePrev, icon: React__default.createElement("svg", { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none" },
                        React__default.createElement("path", { d: "M2.44677 4.99999L5.31252 2.13424C5.62302 1.82374 5.62302 1.31974 5.31252 1.00924C5.00202 0.698742 4.49802 0.698742 4.18752 1.00924L0.727018 4.46974C0.433768 4.76299 0.433768 5.23774 0.727018 5.53024L4.18752 8.99074C4.49802 9.30124 5.00202 9.30124 5.31252 8.99074C5.62302 8.68024 5.62302 8.17624 5.31252 7.86574L2.44677 4.99999Z", fill: isDisablePrev ? '#fff' : '#2D87F3' })), onClick: onPrevClick }, prevText)),
                !isContactForm && nextText && (React__default.createElement(Button, { onClick: () => reportValidity() && onNextClick && onNextClick(answer), className: "survey-next-button", size: "lg", isDisabled: isDisableNext || submitDisabled },
                    nextText,
                    ' ',
                    isSubmitButton ? undefined : (React__default.createElement("svg", { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none" },
                        React__default.createElement("path", { d: "M3.80322 5.19994L0.937465 2.33419C0.626965 2.02369 0.626965 1.51969 0.937465 1.20919C1.24796 0.898693 1.75196 0.898693 2.06246 1.20919L5.52297 4.66969C5.81622 4.96294 5.81622 5.43769 5.52297 5.73019L2.06246 9.19069C1.75196 9.50119 1.24796 9.50119 0.937465 9.19069C0.626965 8.88019 0.626965 8.37619 0.937465 8.06569L3.80322 5.19994Z", fill: "#ffffff" }))))))))));
};

const SurveyThankyouCard = ({ thankyou, thankyouSubtitle, className, style, }) => {
    return (React__default.createElement(StyledSurveyQuestionCard, { className: className, style: style },
        React__default.createElement("div", { className: "survey-inner-wrapper" },
            React__default.createElement(StyledSurveyThankyouCard, null,
                React__default.createElement("div", { className: "survey-thankyou-wrapper-inner" },
                    React__default.createElement("svg", { 
                        // width="122"
                        // height="122"
                        viewBox: "0 0 122 122", fill: "none", className: "survey-thankyou-icon" },
                        React__default.createElement("path", { d: "M61.5 122c33.137 0 60-26.863 60-60S94.637 2 61.5 2s-60 26.863-60 60 26.863 60 60 60Z", fill: theme.colors.primary50 }),
                        React__default.createElement("ellipse", { cx: "61.5", cy: "110.36", rx: "48", ry: "3.36", fill: "#91CAFF" }),
                        React__default.createElement("path", { d: "M82.905 72.666H101.5L87.597 40H35.403L21.5 72.666h18.595V91H83.08l-.174-18.334Z", fill: "#2C74DF" }),
                        React__default.createElement("path", { d: "M74.4 15H39.863a5.364 5.364 0 0 0-5.363 5.363v52.214a5.364 5.364 0 0 0 5.363 5.363h43.273a5.364 5.364 0 0 0 5.363-5.363V21a6 6 0 0 0-6-6H74.4Z", fill: "#fff" }),
                        React__default.createElement("path", { d: "M88.853 80.108H34.147a4.055 4.055 0 0 1-4.087-4.074v-10.65c0-2.27 1.81-4.074 4.087-4.074h54.706a4.055 4.055 0 0 1 4.087 4.074v10.65c0 2.27-1.81 4.074-4.087 4.074Z", fill: "#E4E8EC" }),
                        React__default.createElement("path", { d: "M90.838 85.451H32.162a4.055 4.055 0 0 1-4.087-4.074v-10.65c0-2.27 1.81-4.074 4.087-4.074H90.78a4.055 4.055 0 0 1 4.087 4.074v10.65c.058 2.27-1.81 4.074-4.029 4.074Z", fill: "#fff" }),
                        React__default.createElement("path", { d: "M103.748 75.492v30.263c0 1.92-1.576 3.492-3.503 3.492H23.003c-1.927 0-3.503-1.572-3.503-3.492V75.492c0-1.92 1.576-3.492 3.503-3.492h19.384c1.926 0 3.503 1.571 3.503 3.492v5.354c0 .35.233.582.584.582h30.3c.351 0 .585-.233.585-.582v-5.354c0-1.92 1.576-3.492 3.503-3.492h19.383c1.927 0 3.503 1.571 3.503 3.492Z", fill: "#45A4FF" }),
                        React__default.createElement("path", { stroke: "#2C74DF", d: "M51.954 91.377v3.084c0 1.63 1.285 2.91 2.92 2.91h12.844c1.635 0 2.92-1.28 2.92-2.91v-3.084" }),
                        React__default.createElement("path", { d: "M120.5 38.025c-2-.246-3.25 1.352-2.375 3.195l.25.737c.75 1.844-.375 3.441-2.375 3.195l-.75-.123c-2-.245-3.25 1.352-2.375 3.195l.375.738c.75 1.843-.375 3.44-2.375 3.195l-.75-.123c-1.5-.123-2.625.737-2.625 1.966", stroke: "#FE921D" }),
                        React__default.createElement("path", { d: "M1.533 62c-.269 1.413 1.142 2.337 2.82 1.848l.672-.218c1.678-.543 3.089.38 2.82 1.848l-.134.544c-.269 1.413 1.141 2.337 2.82 1.848l.671-.218c1.68-.543 3.09.38 2.82 1.848l-.134.543c-.201 1.087.538 1.848 1.612 1.957M118 92a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM82 3.187l1.188 4.348 4.347-1.188L86.347 2 82 3.187Z", stroke: "#00B16A" }),
                        React__default.createElement("path", { stroke: "#FE921D", d: "M17 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" }),
                        React__default.createElement("path", { d: "M61.5 26.667c-7.364 0-13.333 5.97-13.333 13.333 0 7.364 5.969 13.333 13.333 13.333S74.833 47.364 74.833 40 68.864 26.667 61.5 26.667Zm7.61 10.276-9.334 9.333a1.33 1.33 0 0 1-1.885 0l-4-4a1.332 1.332 0 1 1 1.885-1.885l3.057 3.057 8.391-8.39a1.332 1.332 0 1 1 1.885 1.885Z", fill: "#00CB8A" })),
                    thankyou && (React__default.createElement(Heading, { className: "survey-thankyou-title", tag: "h3" }, thankyou)),
                    thankyouSubtitle && (React__default.createElement(Text, { className: "survey-thankyou-subtitle", size: "p3" }, thankyouSubtitle)))))));
};

export { SurveyQuestionCard as S, SurveyThankyouCard as a };
