import { Button, useToast } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Toast',
  group: 'Overlays',
  section: 'components',
  icon: 'edit',
  component: useToast,
  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: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const toast = useToast()
      return (
        <Button
          variant="border"
          onClick={() => {
            toast('Your message has been sent', {
              icon: 'mail-closed',
            })
          }}
        >
          Send message
        </Button>
      )
    },
  },
  {
    name: 'With description',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const toast = useToast()
      return (
        <Button
          variant="border"
          onClick={() => {
            toast('Code review added to calendar', {
              description: 'January 21, 2024 - 14:00',
              icon: 'checkmark',
            })
          }}
        >
          Add to calendar
        </Button>
      )
    },
  },
  {
    name: 'With undo button',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const toast = useToast()
      return (
        <Button
          variant="border"
          onClick={() => {
            toast('Ticket flagged as duplicate', {
              description: 'APP-100',
              icon: 'date',
              secondaryButtonLabel: 'Undo',
              onSecondaryClick: () => {
                console.log('onSecondaryClick')
              },
            })
          }}
        >
          Flag as duplicate
        </Button>
      )
    },
  },
  {
    name: 'Red',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const toast = useToast()
      return (
        <Button
          variant="border"
          onClick={() => {
            toast("Couldn't publish article", {
              description: "Your article hasn't been reviewed yet.",
              icon: 'error-filled',
              color: 'red',
            })
          }}
        >
          Publish article
        </Button>
      )
    },
  },
  {
    name: 'Permanent',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const toast = useToast()
      return (
        <Button
          variant="border"
          onClick={() => {
            toast('Jim added you as a friend', {
              description: 'Just now',
              icon: 'user',
              primaryButtonLabel: 'Accept',
              onPrimaryClick: () => {
                console.log('onPrimaryClick')
              },
              secondaryButtonLabel: 'Decline',
              onSecondaryClick: () => {
                console.log('onSecondaryClick')
              },
            })
          }}
        >
          Add friend
        </Button>
      )
    },
  },
]
