import React, { FC, ReactNode, useEffect, useState } from 'react';
import { useMeasure } from '../../hooks/useMeasure';

import css from './index.module.css';

export interface AccordionProps {
  title: string;
  children?: ReactNode;
  id?: string;
}

const Accordion: FC<AccordionProps> = ({
  title,
  children,
  id,
}): JSX.Element => {
  const [checked, isChecked] = useState(false);

  //TODO FIX THIS PLEASE
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const [bind, { height: viewHeight }] = useMeasure();

  return (
    <div className={css.accordion} data-testid="Accordion">
      <input
        className={css.accordion__input}
        type="checkbox"
        id={id || title}
        defaultChecked={checked}
        onChange={(e): void => isChecked(e.target.checked)}
      />
      <label className={css.accordion__label} htmlFor={id || title}>
        <h3>{title}</h3>
      </label>
      <div
        className={css.accordion__content}
        style={{
          maxHeight: checked ? `${viewHeight}px` : '0',
        }}
      >
        <div {...bind}>{children}</div>
      </div>
    </div>
  );
};

export default Accordion;