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

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Loader',
  group: 'Primitives',
  section: 'components',
  icon: 'edit',
  component: Loader,
  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: 'Infinite',
    type: 'component',
    description: 'Infinite loader with default color.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => <Loader />,
  },
  {
    name: 'Progressive',
    type: 'component',
    description: 'Progressive loader with increasing percentage.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [percentage, setPercentage] = useState(0)
      const [hitMax, setHitMax] = useState(false)

      useEffect(() => {
        const intervalId = setInterval(() => {
          setPercentage((p) => {
            if (hitMax) return p

            const n = p + Math.random() * 25

            if (n >= 100) {
              setHitMax(true)
              setTimeout(() => {
                setPercentage(0)
                setHitMax(false)
              }, 500)

              return 100
            }

            return n
          })
        }, 500)

        return () => clearInterval(intervalId)
      }, [hitMax])

      return <Loader value={percentage} />
    },
  },
  {
    name: 'InfiniteRed',
    type: 'component',
    description: 'Infinite loader with red color.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => <Loader color="red" />,
  },
  {
    name: 'ProgressiveRed',
    type: 'component',
    description: 'Progressive loader with red color and increasing percentage.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const [percentage, setPercentage] = useState(0)
      const [hitMax, setHitMax] = useState(false)

      useEffect(() => {
        const intervalId = setInterval(() => {
          setPercentage((p) => {
            if (hitMax) return p

            const n = p + Math.random() * 25

            if (n >= 100) {
              setHitMax(true)
              setTimeout(() => {
                setPercentage(0)
                setHitMax(false)
              }, 500)

              return 100
            }

            return n
          })
        }, 500)

        return () => clearInterval(intervalId)
      }, [hitMax])

      return <Loader color="red" value={percentage} />
    },
  },
]
