Signature

'use client'

import { Code, Heading, Image, Text, VStack } from '@chakra-ui/react'
import { Form } from '@letar/forms'
import { useState } from 'react'
import { z } from 'zod/v4'
import { DemoPageLayout } from '../_components'

const ContractSchema = z
  .object({
    name: z
      .string()
      .min(1, 'Required')
      .meta({ ui: { title: 'Full Name' } }),
    signature: z.string().min(1, 'Signature is required'),
  })
  .strip()

export default function SignatureDemoPage() {
  const [result, setResult] = useState<Record<string, unknown> | null>(null)

  return (
    <DemoPageLayout title="Signature Field" description="Form.Field.Signature — canvas drawing + typed mode">
      {/* Draw mode (по умолчанию) */}
      <VStack gap={4} align="stretch">
        <Heading size="lg">1. Draw + Typed Mode</Heading>
        <Text color="fg.muted">Рисуйте мышью/пальцем или введите имя для курсивной подписи.</Text>

        <Form initialValue={{ name: '', signature: '' }} schema={ContractSchema} onSubmit={(data) => setResult(data)}>
          <Form.Field.String name="name" label="Full Name" />
          <Form.Field.Signature name="signature" label="Your Signature" placeholder="Sign here" clearLabel="Clear" />
          <Form.Button.Submit>Sign Contract</Form.Button.Submit>
        </Form>
      </VStack>

      {/* Кастомные настройки */}
      <VStack gap={4} align="stretch" mt={8}>
        <Heading size="lg">2. Custom Style</Heading>
        <Text color="fg.muted">Синяя подпись, увеличенный canvas, толстая линия.</Text>

        <Form initialValue={{ signature: '' }} onSubmit={(data) => setResult(data)}>
          <Form.Field.Signature
            name="signature"
            label="Premium Signature"
            width={500}
            height={200}
            strokeColor="#1a365d"
            strokeWidth={3}
            backgroundColor="#f7fafc"
            placeholder="Sign with style"
          />
          <Form.Button.Submit>Submit</Form.Button.Submit>
        </Form>
      </VStack>

      {/* Draw only (без typed mode) */}
      <VStack gap={4} align="stretch" mt={8}>
        <Heading size="lg">3. Draw Only (no typed)</Heading>

        <Form initialValue={{ signature: '' }} onSubmit={(data) => setResult(data)}>
          <Form.Field.Signature
            name="signature"
            label="Handwritten Only"
            allowTyped={false}
            placeholder="Draw your signature"
          />
          <Form.Button.Submit>Submit</Form.Button.Submit>
        </Form>
      </VStack>

      {/* Результат */}
      {result && (
        <VStack gap={2} align="stretch" mt={8}>
          <Heading size="md">Submitted Data</Heading>
          {typeof result.signature === 'string' && result.signature.startsWith('data:') && (
            <Image
              src={result.signature as string}
              alt="Signature"
              border="1px solid"
              borderColor="border"
              borderRadius="md"
              maxW="400px"
            />
          )}
          <Code whiteSpace="pre" maxH="200px" overflow="auto">
            {JSON.stringify(
              { ...result, signature: result.signature ? `${(result.signature as string).slice(0, 50)}...` : '' },
              null,
              2,
            )}
          </Code>
        </VStack>
      )}
    </DemoPageLayout>
  )
}

'use client'

import { FieldColorPicker, FieldEditable, FieldFileUpload, FieldSignature } from '@letar/forms-shadcn'
import { useState } from 'react'

import { DemoForm, DemoPageLayout, SubmittedDataPreview } from '../_components'

interface SpecializedValues {
  bio2: string
  brandColor: string
  attachments: File[]
  signature: string
}

const defaultValues: SpecializedValues = {
  bio2: 'Кликните для редактирования',
  brandColor: '#4299E1',
  attachments: [],
  signature: '',
}

export default function SpecializedDemoPage() {
  const [submitted, setSubmitted] = useState<SpecializedValues | null>(null)

  return (
    <DemoPageLayout
      title="Специализированные поля"
      description="Editable, ColorPicker, FileUpload (dropzone), Signature"
    >
      <DemoForm<SpecializedValues> defaultValues={defaultValues} onSubmit={setSubmitted}>
        <FieldEditable name="bio2" label="Кликабельный текст" />
        <FieldColorPicker name="brandColor" label="Цвет бренда" />
        <FieldFileUpload
          name="attachments"
          label="Вложения"
          variant="dropzone"
          maxFiles={3}
          showSize
          dropzoneDescription="До 3 файлов"
        />
        <FieldSignature name="signature" label="Подпись" width={320} height={120} />

        <button
          type="submit"
          className="bg-primary text-primary-foreground rounded-md px-4 py-2 text-sm font-medium"
        >
          Отправить
        </button>
      </DemoForm>

      <SubmittedDataPreview data={submitted} />
    </DemoPageLayout>
  )
}