import { DEFAULT_AVATAR } from '@lume/stores/constants';
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';

import { useState } from 'react';

export default function MutedItem({ data }: { data: any }) {
  const { user, isError, isLoading } = useProfile(data.content);
  const [status, setStatus] = useState(data.status);

  const unmute = async () => {
    const { updateItemInBlacklist } = await import('@lume/utils/storage');
    const res = await updateItemInBlacklist(data.content, 0);
    if (res) {
      setStatus(0);
    }
  };

  const mute = async () => {
    const { updateItemInBlacklist } = await import('@lume/utils/storage');
    const res = await updateItemInBlacklist(data.content, 1);
    if (res) {
      setStatus(1);
    }
  };

  return (
    <div className="flex items-center justify-between">
      {isError || isLoading ? (
        <>
          <div className="flex items-center gap-1.5">
            <div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800"></div>
            <div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
              <div className="h-3 w-16 animate-pulse bg-zinc-800"></div>
              <div className="h-2 w-10 animate-pulse bg-zinc-800"></div>
            </div>
          </div>
        </>
      ) : (
        <>
          <div className="flex items-center gap-1.5">
            <div className="relative h-9 w-9 shrink rounded-md">
              <img
                src={user?.picture || DEFAULT_AVATAR}
                alt={data.content}
                className="h-9 w-9 rounded-md object-cover"
                loading="lazy"
              />
            </div>
            <div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
              <span className="truncate text-sm font-medium leading-none text-zinc-200">
                {user?.display_name || user?.name || 'Pleb'}
              </span>
              <span className="text-xs leading-none text-zinc-400">{shortenKey(data.content)}</span>
            </div>
          </div>
          <div>
            {status === 1 ? (
              <button
                onClick={() => unmute()}
                className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-xs font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
              >
                Unmute
              </button>
            ) : (
              <button
                onClick={() => mute()}
                className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-xs font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
              >
                Mute
              </button>
            )}
          </div>
        </>
      )}
    </div>
  );
}