import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
import { Separator } from '@documenso/ui/primitives/separator';
import { Trans } from '@lingui/react/macro';

export const EnvelopeEditorFieldDiagnostics = ({ field }: { field: TLocalField }) => (
  <>
    <div className="px-4">
      <h3 className="mb-3 font-semibold text-foreground text-sm">
        <Trans>Developer Mode</Trans>
      </h3>

      <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-foreground text-sm">
        {field.id && (
          <p>
            <span className="min-w-12 text-muted-foreground">
              <Trans>Field ID:</Trans>
            </span>{' '}
            {field.id}
          </p>
        )}
        <p>
          <span className="min-w-12 text-muted-foreground">
            <Trans>Recipient ID:</Trans>
          </span>{' '}
          {field.recipientId}
        </p>
        <p>
          <span className="min-w-12 text-muted-foreground">
            <Trans>Pos X:</Trans>
          </span>{' '}
          {field.positionX.toFixed(2)}
        </p>
        <p>
          <span className="min-w-12 text-muted-foreground">
            <Trans>Pos Y:</Trans>
          </span>{' '}
          {field.positionY.toFixed(2)}
        </p>
        <p>
          <span className="min-w-12 text-muted-foreground">
            <Trans>Width:</Trans>
          </span>{' '}
          {field.width.toFixed(2)}
        </p>
        <p>
          <span className="min-w-12 text-muted-foreground">
            <Trans>Height:</Trans>
          </span>{' '}
          {field.height.toFixed(2)}
        </p>
      </div>
    </div>

    <Separator className="my-4" />
  </>
);
