import { drawerAnatomy } from '@ark-ui/react/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'

const anatomy = drawerAnatomy.extendWith('header', 'body', 'footer', 'indent', 'indentBackground')

export const drawer = defineSlotRecipe({
  className: 'drawer',
  slots: anatomy.keys(),
  base: {
    backdrop: {
      position: 'fixed',
      inset: '0',
      background: 'rgba(0, 0, 0, 0.5)',
      zIndex: 'overlay',
      _open: {
        animationName: 'fade-in',
        animationDuration: 'slowest',
        animationTimingFunction: 'slide-in',
      },
      _closed: {
        animationName: 'fade-out',
        animationDuration: 'slow',
        animationTimingFunction: 'slide-out',
      },
    },
    positioner: {
      position: 'fixed',
      inset: '0',
      display: 'flex',
      alignItems: 'flex-end',
      justifyContent: 'center',
      zIndex: 'modal',
      '&[data-swipe-direction=up]': {
        alignItems: 'flex-start',
      },
      '&[data-swipe-direction=left]': {
        alignItems: 'stretch',
        justifyContent: 'flex-start',
      },
      '&[data-swipe-direction=right]': {
        alignItems: 'stretch',
        justifyContent: 'flex-end',
      },
    },
    content: {
      '--bleed': '3rem',
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      width: 'full',
      height: 'full',
      maxHeight: '96svh',
      background: 'bg.default',
      boxShadow: 'xl',
      outline: 'none',
      borderTopRadius: 'xl',
      transitionProperty: 'transform',
      transitionDuration: 'slowest',
      transitionTimingFunction: 'slide-in',
      animationDuration: 'slowest',
      animationTimingFunction: 'slide-in',
      _after: {
        content: '""',
        position: 'absolute',
        insetInline: '0',
        top: '100%',
        height: 'var(--bleed)',
        background: 'inherit',
        pointerEvents: 'none',
      },
      _open: {
        animationName: 'drawer-in-bottom',
      },
      _closed: {
        animationName: 'drawer-out-bottom',
        animationDuration: 'slow',
        animationTimingFunction: 'slide-out',
      },
      '&[data-swipe-direction=up]': {
        borderRadius: '0',
        borderBottomRadius: 'xl',
        _after: { top: 'auto', bottom: '100%' },
        _open: { animationName: 'drawer-in-top' },
        _closed: {
          animationName: 'drawer-out-top',
          animationDuration: 'slow',
          animationTimingFunction: 'slide-out',
        },
      },
      '&[data-swipe-direction=left]': {
        maxHeight: 'none',
        maxWidth: 'sm',
        borderRadius: '0',
        borderRightRadius: 'xl',
        _after: {
          insetInline: 'auto',
          insetBlock: '0',
          top: '0',
          right: '100%',
          width: 'var(--bleed)',
          height: 'auto',
        },
        _open: { animationName: 'drawer-in-left' },
        _closed: {
          animationName: 'drawer-out-left',
          animationDuration: 'slow',
          animationTimingFunction: 'slide-out',
        },
      },
      '&[data-swipe-direction=right]': {
        maxHeight: 'none',
        maxWidth: 'sm',
        borderRadius: '0',
        borderLeftRadius: 'xl',
        _after: {
          insetInline: 'auto',
          insetBlock: '0',
          top: '0',
          left: '100%',
          width: 'var(--bleed)',
          height: 'auto',
        },
        _open: { animationName: 'drawer-in-right' },
        _closed: {
          animationName: 'drawer-out-right',
          animationDuration: 'slow',
          animationTimingFunction: 'slide-out',
        },
      },
    },
    trigger: {
      cursor: 'pointer',
      _focusVisible: {
        outline: '2px solid',
        outlineColor: 'accent.default',
        outlineOffset: '2px',
      },
    },
    grabber: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexShrink: '0',
      width: 'full',
      py: '5',
      cursor: 'grab',
      touchAction: 'none',
      userSelect: 'none',
      _active: { cursor: 'grabbing' },
    },
    grabberIndicator: {
      width: '10',
      height: '1',
      borderRadius: 'full',
      background: 'fg.subtle',
      transitionProperty: 'background-color',
      transitionDuration: 'normal',
      '[data-scope=drawer][data-part=grabber]:hover &': {
        background: 'fg.muted',
      },
    },
    closeTrigger: {
      cursor: 'pointer',
      _focusVisible: {
        outline: '2px solid',
        outlineColor: 'accent.default',
        outlineOffset: '2px',
      },
    },
    swipeArea: {
      position: 'absolute',
      inset: '0',
    },
    title: {
      color: 'fg.default',
      fontWeight: 'medium',
      textStyle: 'lg',
      m: '0',
      mb: '2',
    },
    description: {
      color: 'fg.muted',
      textStyle: 'sm',
      m: '0',
      mt: '1',
    },
    header: {
      display: 'flex',
      flexDirection: 'column',
      gap: '1',
      pt: { base: '4', md: '6' },
      pb: '4',
      px: '5',
    },
    body: {
      display: 'flex',
      flexDirection: 'column',
      flex: '1',
      minHeight: '0',
      gap: '4',
      py: '2',
      px: '5',
      overflow: 'auto',
    },
    footer: {
      display: 'flex',
      gap: '3',
      justifyContent: 'flex-end',
      py: '4',
      px: '5',
    },
  },
})
