import { ActorAvatar } from "./ActorAvatar.tsx";
import { Text } from "./Text.tsx";

interface AvatarInputProps {
  profile?: {
    displayName?: string;
    description?: string;
    avatar?: string;
    handle?: string;
  };
}

export function AvatarInput({ profile }: AvatarInputProps) {
  return (
    <div>
      <Text as="label" size="sm" variant="label" className="block font-medium mb-2">
        Avatar
      </Text>
      <label htmlFor="avatar" className="cursor-pointer">
        <div className="border rounded-full border-zinc-300 dark:border-zinc-600 w-16 h-16 mb-2 relative hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors">
          <div className="absolute bottom-0 right-0 bg-zinc-800 dark:bg-zinc-700 rounded-full w-5 h-5 flex items-center justify-center z-10">
            <svg
              className="w-3 h-3 text-white"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
                clipRule="evenodd"
              />
            </svg>
          </div>
          <div
            id="image-preview"
            className="w-full h-full rounded-full overflow-hidden"
          >
            {profile
              ? (
                <ActorAvatar
                  profile={profile}
                  size={64}
                  className="w-full h-full"
                />
              )
              : (
                <div className="w-full h-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
                  <svg
                    className="w-8 h-8 text-zinc-400 dark:text-zinc-500"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                      clipRule="evenodd"
                    />
                  </svg>
                </div>
              )}
          </div>
        </div>
      </label>
      <input
        type="file"
        id="avatar"
        name="avatar"
        accept="image/*"
        className="hidden"
        /* @ts-ignore - Hyperscript attribute */
        _="on change
           if my.files.length > 0
             set file to my.files[0]
             call URL.createObjectURL(file)
             set imageUrl to the result
             put `<img src='${imageUrl}' class='w-full h-full object-cover rounded-full' alt='Avatar preview' />` into #image-preview
           end"
      />
    </div>
  );
}