kit-ui/components/pastel/ExportMenu.tsx

'use client';

import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useState, useEffect } from 'react';
import { Download, Copy, Check, Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import {
  exportAsCSS,
  exportAsSCSS,
  exportAsTailwind,
  exportAsJSON,
  exportAsJavaScript,
  downloadAsFile,
  type ExportColor,
} from '@/lib/pastel/utils/export';
import { pastelAPI } from '@/lib/pastel/api/client';

interface ExportMenuProps {
  colors: string[];
  className?: string;
}

type ExportFormat = 'css' | 'scss' | 'tailwind' | 'json' | 'javascript';
type ColorSpace = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklab' | 'lch' | 'oklch';

export function ExportMenu({ colors, className }: ExportMenuProps) {
  const [format, setFormat] = useState<ExportFormat>('css');
  const [colorSpace, setColorSpace] = useState<ColorSpace>('hex');
  const [convertedColors, setConvertedColors] = useState<string[]>(colors);
  const [isConverting, setIsConverting] = useState(false);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    async function convertColors() {
      if (colorSpace === 'hex') {
        setConvertedColors(colors);
        return;
      }

      setIsConverting(true);
      try {
        const response = await pastelAPI.convertFormat({
          colors,
          format: colorSpace,
        });

        if (response.success) {
          setConvertedColors(response.data.conversions.map(c => c.output));
        }
      } catch (error) {
        console.error('Failed to convert colors:', error);
        toast.error('Failed to convert colors to selected space');
      } finally {
        setIsConverting(false);
      }
    }

    convertColors();
  }, [colors, colorSpace]);

  const exportColors: ExportColor[] = convertedColors.map((value) => ({ value }));

  const getExportContent = (): string => {
    switch (format) {
      case 'css':
        return exportAsCSS(exportColors);
      case 'scss':
        return exportAsSCSS(exportColors);
      case 'tailwind':
        return exportAsTailwind(exportColors);
      case 'json':
        return exportAsJSON(exportColors);
      case 'javascript':
        return exportAsJavaScript(exportColors);
    }
  };

  const getFileExtension = (): string => {
    switch (format) {
      case 'css':
        return 'css';
      case 'scss':
        return 'scss';
      case 'tailwind':
        return 'js';
      case 'json':
        return 'json';
      case 'javascript':
        return 'js';
    }
  };

  const handleCopy = () => {
    const content = getExportContent();
    navigator.clipboard.writeText(content);
    setCopied(true);
    toast.success('Copied to clipboard!');
    setTimeout(() => setCopied(false), 2000);
  };

  const handleDownload = () => {
    const content = getExportContent();
    const extension = getFileExtension();
    downloadAsFile(content, `palette.${extension}`, 'text/plain');
    toast.success('Downloaded!');
  };

  if (colors.length === 0) {
    return null;
  }

  return (
    <div className={className}>
      <div className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <h3 className="text-sm font-medium">Export Format</h3>
            <Select
              value={format}
              onValueChange={(value) => setFormat(value as ExportFormat)}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select format" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="css">CSS Variables</SelectItem>
                <SelectItem value="scss">SCSS Variables</SelectItem>
                <SelectItem value="tailwind">Tailwind Config</SelectItem>
                <SelectItem value="json">JSON</SelectItem>
                <SelectItem value="javascript">JavaScript Array</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <h3 className="text-sm font-medium">Color Space</h3>
            <Select
              value={colorSpace}
              onValueChange={(value) => setColorSpace(value as ColorSpace)}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select space" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="hex">Hex</SelectItem>
                <SelectItem value="rgb">RGB</SelectItem>
                <SelectItem value="hsl">HSL</SelectItem>
                <SelectItem value="lab">Lab</SelectItem>
                <SelectItem value="oklab">OkLab</SelectItem>
                <SelectItem value="lch">LCH</SelectItem>
                <SelectItem value="oklch">OkLCH</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <div className="p-4 bg-muted rounded-lg relative min-h-[100px]">
          {isConverting ? (
            <div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm rounded-lg z-10">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          ) : null}
          <pre className="text-xs overflow-x-auto">
            <code>{getExportContent()}</code>
          </pre>
        </div>

        <div className="flex gap-2 flex-col md:flex-row">
          <Button onClick={handleCopy} variant="outline" className="w-full md:flex-1" disabled={isConverting}>
            {copied ? (
              <>
                <Check className="h-4 w-4 mr-2" />
                Copied!
              </>
            ) : (
              <>
                <Copy className="h-4 w-4 mr-2" />
                Copy
              </>
            )}
          </Button>
          <Button onClick={handleDownload} variant="default" className="w-full md:flex-1" disabled={isConverting}>
            <Download className="h-4 w-4 mr-2" />
            Download
          </Button>
        </div>
      </div>
    </div>
  );
}