import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { TitleDescriptionFormat as TitleDescriptionFormatI } from '../../models/common';
import styles from './Accordion.module.scss';

export type Props = {
  title: string;
  messages: TitleDescriptionFormatI[];
};

const Accordion = (props: Props): JSX.Element => {
  const { title, messages } = props;
  const [active, setActive] = useState(0);

  const selectAccordionItem = (accordionItemNum: number) => {
    const current = active === accordionItemNum ? -1 : accordionItemNum;
    setActive(current);
  };

  return (
    <div className={styles.accordion}>
      <div className={`h5_links ${styles.titleContainer}`}>{title}</div>
      {messages?.map((content, i) => (
        <div key={i} className={styles.accordionItem}>
          <button
            key={i}
            className={`${styles.accordionItem_trigger}`}
            onClick={content.text ? () => selectAccordionItem(i) : undefined}
            disabled={!content.text}
            aria-label=""
          >
            <span className="h4">{i + 1 < 10 ? `0${i + 1}` : i + 1}</span>
            <span className="text_1">{content.title}</span>
          </button>
          <AnimatePresence>
            {i === active && !!content.text && (
              <motion.div
                key={active}
                className={`text_2 ${styles.accordionItem_content}`}
                initial={{ height: 0 }}
                animate={{
                  height: 'auto',
                  transition: {
                    type: 'linear',
                  },
                }}
                exit={{ height: 0 }}
              >
                <div>{content.text}</div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      ))}
    </div>
  );
};

export default Accordion;