import { RichText, useBlockProps } from '@wordpress/block-editor';
import {
  registerBlockType,
  type BlockEditProps,
  type BlockSaveProps,
} from '@wordpress/blocks';
import { Button } from '@wordpress/components';

const NAME = 'recomaze/faq';

interface Question {
  question: string;
  answer: string;
}

type Attributes = {
  questions: Question[];
};

const Edit = ({
  attributes,
  setAttributes,
}: BlockEditProps<Attributes>): JSX.Element => {
  const questions = attributes.questions ?? [];
  const change = (index: number, patch: Partial<Question>): void =>
    setAttributes({
      questions: questions.map((item, at) =>
        at === index ? { ...item, ...patch } : item
      ),
    });

  return (
    <div {...useBlockProps({ className: 'recomaze-faq' })}>
      {questions.map((item, index) => (
        <div className="recomaze-faq__item" key={index}>
          <RichText
            tagName="h3"
            className="recomaze-faq__question"
            value={item.question}
            placeholder="Question"
            allowedFormats={[]}
            onChange={question => change(index, { question })}
          />
          <RichText
            tagName="div"
            className="recomaze-faq__answer"
            value={item.answer}
            placeholder="Answer"
            onChange={answer => change(index, { answer })}
          />
          <Button
            variant="tertiary"
            isDestructive
            size="small"
            className="recomaze-faq__remove"
            onClick={() =>
              setAttributes({
                questions: questions.filter((_, at) => at !== index),
              })
            }
          >
            Remove question
          </Button>
        </div>
      ))}
      <Button
        variant="secondary"
        onClick={() =>
          setAttributes({
            questions: [...questions, { question: '', answer: '' }],
          })
        }
      >
        Add question
      </Button>
    </div>
  );
};

const Save = ({ attributes }: BlockSaveProps<Attributes>): JSX.Element => (
  <div {...useBlockProps.save({ className: 'recomaze-faq' })}>
    {(attributes.questions ?? [])
      .filter(item => item.question.trim() !== '')
      .map((item, index) => (
        <div className="recomaze-faq__item" key={index}>
          <RichText.Content
            tagName="h3"
            className="recomaze-faq__question"
            value={item.question}
          />
          <RichText.Content
            tagName="div"
            className="recomaze-faq__answer"
            value={item.answer}
          />
        </div>
      ))}
  </div>
);

registerBlockType<Attributes>(
  {
    name: NAME,
    title: 'FAQ',
    category: 'text',
    attributes: { questions: { type: 'array', default: [] } },
  },
  { edit: Edit, save: Save }
);