import { useRef } from "react";
import {
  Avatar,
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../atoms";
import {Form} from '@remix-run/react'
import { CloseIcon, UploadIcon } from "../../../icons";
export interface EditPhotoDialogProps {
  open?: boolean;
  avatarUrl?: string;
  onSubmit?: () => void;
  onClose?: () => void;
  files: any
  formAction?: string
  formMethod?: "get" | "post"
}
const EditPhotoDialog = ({ open = false, avatarUrl, onClose, files, formMethod, formAction = "./"}: EditPhotoDialogProps) => {
  const fileRef = useRef<HTMLInputElement>(null);
  return (
    <Dialog open={open}>
      <DialogContent className="divide-y divide-mono-200 gap-0">
        <DialogHeader>
          <div className="flex items-center gap-4">
            <Avatar className="w-14 h-14" image={avatarUrl} />
            <DialogTitle className="flex-1 text-lg font-semibold text-gray-900">
              Edit profile picture
            </DialogTitle>
            <button className="cursor-pointer" onClick={onClose}>
              <CloseIcon />
            </button>
          </div>
        </DialogHeader>
        <DialogDescription>
          <Form action={formAction} method={formMethod}>
          <input type="file" hidden ref={fileRef} />
          <div
            onClick={() => fileRef?.current?.click()}
            className="py-4 px-6 cursor-pointer rounded-xl border border-gray-200 flex flex-col items-center self-stretch gap-3"
          >
            <div className="p-2.5 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] border border-mono-200 rounded-lg">
              <UploadIcon />
            </div>
            <div className="flex flex-col gap-1 items-center">
              <div className="flex items-start gap-1">
                <Button variant="primary-link">Click to upload</Button>
                <p className="text-sm text-gray-600 font-normal">
                  or drag and drop
                </p>
              </div>
              <p className="text-xs font-normal text-gray-600">
                SVG, PNG, JPG or GIF (max. 800x400px)
              </p>
            </div>
          </div>
          </Form>
        </DialogDescription>
        <DialogFooter>
          <Button size="sm" variant="primary-tertiary" onClick={onClose}>
            Cancel
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export { EditPhotoDialog };
