import { RichTextEditor } from '@based/ui'
import { useEffect, useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Rich Text Editor',
  group: 'Inputs',
  section: 'components',
  icon: 'edit',
  component: RichTextEditor,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description: 'RichTextEditor with a placeholder and editable area.',
    style: {
      size: 'small',
      frame: false,
    },
    render: () => {
      const initialText =
        "The day begins early for the developer, coffee in hand, as they settle into their workstation. The morning light filters through the blinds while they check emails, project updates, and the team's task board. Priorities are set during the daily stand-up meeting, where everyone shares what they're working on and any roadblocks they're facing. The developer dives into their first task of the day: debugging a pesky issue that has been causing performance hiccups in the application. Their screen is a jungle of code and logs, but after some careful analysis and a few lines of clever refactoring, the issue is finally resolved. A small but satisfying victory. By midday, the focus shifts to building a new feature for the app. The developer juggles between writing clean, modular code and ensuring it aligns with the design team's vision. They collaborate closely with colleagues over Slack and a video call, hashing out details about functionality and edge cases. A quick lunch break offers a chance to recharge, maybe with a stroll or a chat with coworkers, before diving back into the zone. This time, it's all about testing: writing unit tests, running the application, and fixing any inconsistencies. The clock ticks by, but the developer is in flow, tackling challenges and making progress. As the day winds down, the developer commits their changes and submits a pull request for review. With feedback from teammates, they polish up the final details and deploy the update to staging for testing. Wrapping up, they take a moment to jot down notes for tomorrow and reflect on what went well. It's a day filled with problem-solving, collaboration, and creativity—a mix of routine and surprises that keeps the job exciting. Finally, they shut down their computer, ready to unwind and recharge for another day of crafting digital experiences."
      const [value, setValue] = useState<string>(
        `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"${initialText}","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
      )

      return <RichTextEditor value={value} onChange={setValue} />
    },
  },
  {
    name: 'Changing outside value',
    type: 'component',
    description: 'RichTextEditor with dynamically changing external value.',
    style: {
      size: 'small',
      frame: false,
    },
    render: () => {
      const [value, setValue] = useState<string>()

      useEffect(() => {
        const intervalId = setInterval(() => {
          setValue(
            `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"${Math.random() * 100}","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
          )
        }, 500)
        return () => clearInterval(intervalId)
      }, [])

      return <RichTextEditor value={value} onChange={setValue} />
    },
  },
]
