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

const NAME = 'recomaze/howto';

interface Step {
  title: string;
  content: string;
}

type Attributes = {
  description: string;
  hours: number;
  minutes: number;
  steps: Step[];
};

const totalTime = (hours: number, minutes: number): string => {
  const parts = [];
  if (hours > 0) {
    parts.push(`${hours} ${hours === 1 ? 'hour' : 'hours'}`);
  }
  if (minutes > 0) {
    parts.push(`${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`);
  }
  return parts.join(' ');
};

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

  return (
    <>
      <InspectorControls>
        <PanelBody title="Total time">
          <TextControl
            label="Hours"
            type="number"
            min={0}
            value={String(attributes.hours ?? 0)}
            onChange={value =>
              setAttributes({ hours: Math.max(0, Number(value) || 0) })
            }
            __nextHasNoMarginBottom
            __next40pxDefaultSize
          />
          <TextControl
            label="Minutes"
            type="number"
            min={0}
            value={String(attributes.minutes ?? 0)}
            onChange={value =>
              setAttributes({ minutes: Math.max(0, Number(value) || 0) })
            }
            help="Shown under the description and marked up as the total time."
            __nextHasNoMarginBottom
            __next40pxDefaultSize
          />
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps({ className: 'recomaze-howto' })}>
        <RichText
          tagName="p"
          className="recomaze-howto__description"
          value={attributes.description}
          placeholder="What these steps lead to (optional)"
          onChange={description => setAttributes({ description })}
        />
        <ol className="recomaze-howto__steps">
          {steps.map((step, index) => (
            <li className="recomaze-howto__step" key={index}>
              <RichText
                tagName="h3"
                className="recomaze-howto__step-title"
                value={step.title}
                placeholder="Step title"
                allowedFormats={[]}
                onChange={title => change(index, { title })}
              />
              <RichText
                tagName="div"
                className="recomaze-howto__step-content"
                value={step.content}
                placeholder="What to do in this step"
                onChange={content => change(index, { content })}
              />
              <Button
                variant="tertiary"
                isDestructive
                size="small"
                className="recomaze-howto__remove"
                onClick={() =>
                  setAttributes({
                    steps: steps.filter((_, at) => at !== index),
                  })
                }
              >
                Remove step
              </Button>
            </li>
          ))}
        </ol>
        <Button
          variant="secondary"
          onClick={() =>
            setAttributes({ steps: [...steps, { title: '', content: '' }] })
          }
        >
          Add step
        </Button>
      </div>
    </>
  );
};

const Save = ({ attributes }: BlockSaveProps<Attributes>): JSX.Element => {
  const time = totalTime(attributes.hours ?? 0, attributes.minutes ?? 0);
  return (
    <div {...useBlockProps.save({ className: 'recomaze-howto' })}>
      {attributes.description.trim() !== '' && (
        <RichText.Content
          tagName="p"
          className="recomaze-howto__description"
          value={attributes.description}
        />
      )}
      {time !== '' && (
        <p className="recomaze-howto__time">Total time: {time}</p>
      )}
      <ol className="recomaze-howto__steps">
        {(attributes.steps ?? [])
          .filter(
            step => step.title.trim() !== '' || step.content.trim() !== ''
          )
          .map((step, index) => (
            <li
              className="recomaze-howto__step"
              id={`recomaze-step-${index + 1}`}
              key={index}
            >
              {step.title.trim() !== '' && (
                <RichText.Content
                  tagName="h3"
                  className="recomaze-howto__step-title"
                  value={step.title}
                />
              )}
              <RichText.Content
                tagName="div"
                className="recomaze-howto__step-content"
                value={step.content}
              />
            </li>
          ))}
      </ol>
    </div>
  );
};

registerBlockType<Attributes>(
  {
    name: NAME,
    title: 'How-to',
    category: 'text',
    attributes: {
      description: { type: 'string', default: '' },
      hours: { type: 'number', default: 0 },
      minutes: { type: 'number', default: 0 },
      steps: { type: 'array', default: [] },
    },
  },
  { edit: Edit, save: Save }
);