Dialog with Link Share and Toggles

'use client';

import { CheckIcon, CopyIcon, ExternalLink, Link, Share2 } from 'lucide-react';
import { useRef, useState } from 'react';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';

export default function Dialog09() {
  const [copied, setCopied] = useState<boolean>(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const handleCopy = () => {
    if (inputRef.current) {
      navigator.clipboard.writeText(inputRef.current.value);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    }
  };

  return (
    <Dialog defaultOpen>
      <DialogTrigger render={<Button />}>
        <Share2 className="mr-2 h-4 w-4" />
        Share
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Share & Collaborate</DialogTitle>
          <p className="text-pretty text-muted-foreground text-sm">
            Share this project with your team to collaborate on it.
          </p>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="flex items-center justify-between space-x-2">
            <div className="flex items-center space-x-2">
              <span>Enable comments and suggestions</span>
            </div>
            <Switch id="comments" />
          </div>

          <div className="space-y-1.5">
            <Label className="sr-only" htmlFor="share-link">
              Share Link
            </Label>
            <div className="relative">
              <Input
                className="pe-9"
                id="share-link"
                readOnly
                ref={inputRef}
                value="https://writer.so/app/projects/123?share=true"
              />
              <TooltipProvider delay={0}>
                <Tooltip>
                  <TooltipTrigger
                    render={
                      <button
                        aria-label={copied ? 'Copied' : 'Copy to clipboard'}
                        className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed"
                        disabled={copied}
                        onClick={handleCopy}
                      />
                    }
                  >
                    <div
                      className={cn(
                        'transition-[transform,opacity] duration-200 ease-out',
                        copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0'
                      )}
                    >
                      <CheckIcon
                        aria-hidden="true"
                        className="text-primary"
                        size={16}
                      />
                    </div>
                    <div
                      className={cn(
                        'absolute transition-[transform,opacity] duration-200 ease-out',
                        copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
                      )}
                    >
                      <CopyIcon aria-hidden="true" size={16} />
                    </div>
                  </TooltipTrigger>
                  <TooltipContent className="px-2 py-1 text-xs">
                    {copied ? 'Copied!' : 'Copy to clipboard'}
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </div>

          <div className="flex space-x-2">
            <Button className="flex-1 gap-2" onClick={handleCopy}>
              <Link className="h-4 w-4" />
              Copy Link
            </Button>
            <Button className="flex-1 gap-2" variant="outline">
              <ExternalLink className="h-4 w-4" />
              Preview
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}