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

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Dialog',
  group: 'Overlays',
  section: 'components',
  icon: 'edit',
  component: useDialog,
  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 dialog = useDialog()

      return (
        <Button
          variant="border"
          onClick={() => {
            dialog({
              title: 'Message sent',
              description:
                "Your message has been sent. We'll get back to you in 2-3 business days.",
              dismissButtonLabel: 'Got it',
            })
          }}
        >
          Send message
        </Button>
      )
    },
  },
  {
    name: 'Action',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const dialog = useDialog()

      return (
        <Button
          variant="border"
          onClick={() => {
            dialog({
              title: 'Discard your changes?',
              description:
                'You have unsaved changed on this page. Leaving this page without saving will discard these changes.',
              dismissButtonLabel: 'Go back',
              actionButtonLabel: 'Discard',
              onAction: () => {
                console.log('onAction')
              },
            })
          }}
        >
          Quit editing
        </Button>
      )
    },
  },
  {
    name: 'Destructive action',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      const dialog = useDialog()

      return (
        <Button
          variant="border"
          onClick={() => {
            dialog({
              title: 'Delete your profile?',
              description:
                "You'll lose all your files. Any personal data will be removed from our servers within a week.",
              dismissButtonLabel: 'Keep profile',
              actionButtonLabel: 'Delete',
              onAction: () => {
                console.log('onAction')
              },
              color: 'red',
            })
          }}
        >
          Delete profile
        </Button>
      )
    },
  },
]
