'use client'

import { useForm } from '@payloadcms/ui/forms/Form'
import { useField } from '@payloadcms/ui/forms/useField'
import * as React from 'react'

import { blockFieldsSlug } from '../../../../slugs.js'
import './index.scss'

const baseClass = 'custom-blocks-field-management'

const blocksPath = 'customBlocks'

export const AddCustomBlocks: React.FC = () => {
  const { addFieldRow, replaceFieldRow } = useForm()
  const { value } = useField<number>({ path: blocksPath })

  return (
    <div className={baseClass}>
      <div className={`${baseClass}__blocks-grid`}>
        <button
          className={`${baseClass}__block-button`}
          onClick={() =>
            addFieldRow({
              data: { block1Title: 'Block 1: Prefilled Title', blockType: 'block-1' },
              path: blocksPath,
              schemaPath: `${blockFieldsSlug}.${blocksPath}.block-1`,
            })
          }
          type="button"
        >
          Add Block 1
        </button>

        <button
          className={`${baseClass}__block-button`}
          onClick={() =>
            addFieldRow({
              data: { block2Title: 'Block 2: Prefilled Title', blockType: 'block-2' },
              path: blocksPath,
              schemaPath: `${blockFieldsSlug}.${blocksPath}.block-2`,
            })
          }
          type="button"
        >
          Add Block 2
        </button>
      </div>

      <div>
        <button
          className={`${baseClass}__block-button ${baseClass}__replace-block-button`}
          onClick={() =>
            replaceFieldRow({
              data: { block1Title: 'REPLACED BLOCK', blockType: 'block-1' },
              path: blocksPath,
              rowIndex: value - 1,
              schemaPath: `${blockFieldsSlug}.${blocksPath}.block-1`,
            })
          }
          type="button"
        >
          Replace Block {value}
        </button>
      </div>
    </div>
  )
}
