import React, { type ReactNode } from 'react'
import { Stack, Group, Paper, Button, Title, Box } from '@mantine/core'
import { useFormLayoutStore } from '../store/FormLayout.store'

interface FormSectionProps {
  type: 'header' | 'body' | 'footer' | 'error'
  title?: string
  rightSection?: ReactNode
  children?: ReactNode
  buttonTitles?: { submit?: string; cancel?: string }
  className?: string
  [key: string]: any
}

export const FormSection: React.FC<FormSectionProps> = ({
  type,
  title,
  rightSection,
  children,
  buttonTitles,
  className,
  ...others
}) => {
  const { onCancel, onSubmit, request, loading } = useFormLayoutStore((state) => ({
    onCancel: state.onCancel,
    onSubmit: state.onSubmit,
    request: state.request,
    loading: state.loading,
  }))

  if (type === 'header') {
    return (
      <Group
        justify="space-between"
        p="md"
        style={{
          borderBottom: '1px solid var(--mantine-color-gray-3)',
        }}
        className={className}
        {...others}
      >
        <Title order={4} size="h5">
          {title}
        </Title>
        {rightSection && <Box>{rightSection}</Box>}
      </Group>
    )
  }

  if (type === 'body') {
    return (
      <Stack
        gap="md"
        p="md"
        style={{ flex: 1, overflow: 'auto' }}
        className={className}
        {...others}
      >
        {children}
      </Stack>
    )
  }

  if (type === 'footer') {
    return (
      <Group
        justify="flex-end"
        gap="xs"
        p="md"
        style={{
          borderTop: '1px solid var(--mantine-color-gray-3)',
        }}
        className={className}
        {...others}
      >
        {children}
        {request !== 'view' && (
          <>
            <Button
              variant="default"
              onClick={onCancel}
              disabled={loading}
            >
              {buttonTitles?.cancel ?? 'Cancel'}
            </Button>
            <Button
              type="submit"
              onClick={onSubmit}
              loading={loading}
            >
              {buttonTitles?.submit ?? (request === 'delete' ? 'Delete' : 'Save')}
            </Button>
          </>
        )}
      </Group>
    )
  }

  if (type === 'error') {
    return (
      <Paper
        p="sm"
        m="md"
        style={{
          backgroundColor: 'var(--mantine-color-red-0)',
          border: '1px solid var(--mantine-color-red-3)',
        }}
        className={className}
        {...others}
      >
        {children}
      </Paper>
    )
  }

  return null
}