import { BasedFinder, Button, type Fields, colors, useToast } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Based Finder',
  group: 'Based Components',
  section: 'components',
  icon: 'folder',
  component: BasedFinder,
  subtitle:
    'Displays data in tables, grids, or calendars for easy analysis and tracking.',
  showApi: true,
  showUsage: true,
  buttons: [],
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Table',
    type: 'component',
    description:
      'Organizes data into rows and columns for structured comparison.',
    render: () => {
      const toast = useToast()

      return (
        <BasedFinder
          endpoints={{
            query: 'get-demo-data',
            schema: 'get-demo-schema',
            totalQuery: 'get-demo-total',
          }}
          type="article"
          transformFields={(fields) => {
            fields.publishedAt.calendar = { type: 'start' }
            delete fields.createdAt
            delete fields.updatedAt

            const desiredOrder = [
              'image',
              'title',
              'authors',
              'format',
              'paid',
              'keywords',
              'publishedAt',
            ]

            const res: Fields = {}

            for (const k of desiredOrder) {
              res[k] = fields[k]
            }

            return res
          }}
          onItemClick={(item) => {
            toast(`clicked item ${item.id}`)
          }}
          itemActions={[
            {
              label: 'Delete',
              color: 'red',
              icon: 'delete',
              onClick: (item) => toast(`delete ${item.id}`),
            },
          ]}
          bulkActions={[
            {
              label: 'Delete',
              color: 'red',
              icon: 'delete',
              onClick: (selected) => toast(`delete ${selected.length}`),
            },
          ]}
        >
          <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
            <div
              style={{
                flexShrink: 0,
                width: '100%',
                height: 64,
                padding: '0 20px',
                display: 'flex',
                alignItems: 'center',
                zIndex: 3,
                background: colors.neutralInverted100,
                boxShadow: `inset 0 -1px 0 0 ${colors.neutral20Adjusted}`,
              }}
            >
              <BasedFinder.Header
                title="Select articles"
                trailButton={<Button leadIcon="add">Add article</Button>}
              />
            </div>
            <div
              style={{
                height: 'calc(100% - 64px)',
                width: '100%',
              }}
            >
              <BasedFinder.Body />
            </div>
          </div>
        </BasedFinder>
      )
    },
  },
  {
    name: 'Grid',
    type: 'component',
    description:
      'Displays data in a card-like format for a more visual layout.',
    render: () => {
      const toast = useToast()

      return (
        <BasedFinder
          endpoints={{
            query: 'get-demo-data',
            schema: 'get-demo-schema',
            totalQuery: 'get-demo-total',
          }}
          defaultView="grid"
          type="article"
          transformFields={(fields) => {
            fields.publishedAt.calendar = { type: 'start' }
            delete fields.createdAt
            delete fields.updatedAt

            const desiredOrder = [
              'image',
              'title',
              'authors',
              'format',
              'paid',
              'keywords',
              'publishedAt',
            ]

            const res: Fields = {}

            for (const k of desiredOrder) {
              res[k] = fields[k]
            }

            return res
          }}
          onItemClick={(item) => {
            toast(`clicked item ${item.id}`)
          }}
          itemActions={[
            {
              label: 'Delete',
              color: 'red',
              icon: 'delete',
              onClick: (item) => toast(`delete ${item.id}`),
            },
          ]}
          bulkActions={[
            {
              label: 'Delete',
              color: 'red',
              icon: 'delete',
              onClick: (selected) => toast(`delete ${selected.length}`),
            },
          ]}
        >
          <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
            <div
              style={{
                flexShrink: 0,
                width: '100%',
                height: 64,
                padding: '0 20px',
                display: 'flex',
                alignItems: 'center',
                zIndex: 3,
                background: colors.neutralInverted100,
                boxShadow: `inset 0 -1px 0 0 ${colors.neutral20Adjusted}`,
              }}
            >
              <BasedFinder.Header
                title="Select articles"
                trailButton={<Button leadIcon="add">Add article</Button>}
              />
            </div>
            <div
              style={{
                height: 'calc(100% - 64px)',
                width: '100%',
              }}
            >
              <BasedFinder.Body />
            </div>
          </div>
        </BasedFinder>
      )
    },
  },
  {
    name: 'Calendar',
    type: 'component',
    description: 'Presents data chronologically, mapped to specific dates.',
    style: {
      size: 'big',
    },
    render: () => {
      const toast = useToast()

      return (
        <BasedFinder
          endpoints={{
            query: 'get-demo-data',
            schema: 'get-demo-schema',
            totalQuery: 'get-demo-total',
          }}
          defaultView="calendar"
          type="article"
          transformFields={(fields) => {
            fields.publishedAt.calendar = { type: 'start' }
            delete fields.createdAt
            delete fields.updatedAt

            const desiredOrder = [
              'image',
              'title',
              'authors',
              'format',
              'paid',
              'keywords',
              'publishedAt',
            ]

            const res: Fields = {}

            for (const k of desiredOrder) {
              res[k] = fields[k]
            }

            return res
          }}
          onItemClick={(item) => {
            toast(`clicked item ${item.id}`)
          }}
          itemActions={[
            {
              label: 'Delete',
              color: 'red',
              icon: 'delete',
              onClick: (item) => toast(`delete ${item.id}`),
            },
          ]}
          bulkActions={[
            {
              label: 'Delete',
              color: 'red',
              icon: 'delete',
              onClick: (selected) => toast(`delete ${selected.length}`),
            },
          ]}
        >
          <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
            <div
              style={{
                flexShrink: 0,
                width: '100%',
                height: 64,
                padding: '0 20px',
                display: 'flex',
                alignItems: 'center',
                zIndex: 3,
                background: colors.neutralInverted100,
                boxShadow: `inset 0 -1px 0 0 ${colors.neutral20Adjusted}`,
              }}
            >
              <BasedFinder.Header
                title="Select articles"
                trailButton={<Button leadIcon="add">Add article</Button>}
              />
            </div>
            <div
              style={{
                height: 'calc(100% - 64px)',
                width: '100%',
              }}
            >
              <BasedFinder.Body />
            </div>
          </div>
        </BasedFinder>
      )
    },
  },
]
