import React, { useEffect, useState } from 'react';
import { Heading } from '@/components/ui/heading';
import Link from 'next/link';
import CommonImage from '../common/CommonImage';
import { Text } from '@/components/ui/text';
import { Avatar } from '@/components/ui/avatar';
import { ImageCropper } from '@/components/ui/image-cropper';
import { FileWithPath, useDropzone } from 'react-dropzone';
export type FileWithPreview = FileWithPath & {
  preview: string;
};
const accept = {
  'image/*': [],
};
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { IBranch, IDivision, UnknownRecord } from '@/types';
import { store } from '@/store/store';
import { WOSA_ADMIN_URL } from '@/config/site-config';
import AsyncImage from '../common/AsyncImage';
import { fetchBranchesAndDivisions } from '../theme/top-bar/user/user-functions';

const links = [
  {
    title: 'Reset Password',
    href: `${WOSA_ADMIN_URL}user/profile_/?tab=cp`,
    icon: '/header/reset-password.png',
    alt: 'Reset',
    width: 24,
    height: 24,
  },
  {
    title: 'Logout',
    href: `${WOSA_ADMIN_URL}Login/logout/Logged-out-Regular`,
    icon: '/header/Logout.png',
    alt: 'Logout',
    width: 20,
    height: 20,
  },
];

const HeaderProfile: React.FC = () => {
  const [functionalBranches, setFunctionalBranches] = useState<IBranch[]>([]);
  const [userDivisions, setUserDivisions] = useState<IDivision[]>([]);
  const [userId, setUserId] = useState<number | null>(null);
  const [myProfile, setMyProfile] = useState<UnknownRecord | null>({});
  const [dp, setDp] = useState<string>('');

  useEffect(() => {
    async function fetchData() {
      const { branches, divisions } = await fetchBranchesAndDivisions(
        String(userId),
      );
      setFunctionalBranches(Array.isArray(branches) ? branches : []);
      setUserDivisions(Array.isArray(divisions) ? divisions : []);
      setDp(myProfile?.image || '');
    }

    if (userId) fetchData();
    const user = store.getState().session.user;

    setMyProfile(user);
    setUserId(user?.id || null);
  }, [userId, myProfile]);

  const [selectedFile, setSelectedFile] =
    React.useState<FileWithPreview | null>(null);
  const [isDialogOpen, setDialogOpen] = React.useState(false);

  const onDrop = React.useCallback(
    (acceptedFiles: FileWithPath[]) => {
      const file = acceptedFiles[0];
      if (!file) {
        alert('Selected image is too large!');
        return;
      }
      const fileWithPreview = Object.assign(file, {
        preview: URL.createObjectURL(file),
      });
      setSelectedFile(fileWithPreview);
      setDialogOpen(true);
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );
  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept,
  });

  return (
    <Text className="header_right_side">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Text className="admin-user-name user-menu flex items-center gap-2">
            <Text className="user-dp-header">
              <AsyncImage
                src={dp ?? ''}
                fallback={`/header/no-image.png`}
                directory="employees"
                classname="userDp"
                alt={`${myProfile?.fname} ${myProfile?.lname}`}
                width={30}
                height={30}
              />
            </Text>
            <div className="name-title">
              <Heading level="h3" className="profile-username">
                {myProfile?.fname}
              </Heading>
              <div className="user-id">
                <span>Employee Id:</span> {myProfile?.employeeCode}
              </div>
            </div>
          </Text>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-80 mr-1 profile-widget">
          <Text className="user-data-menu">
            <Text className="header-panel-section">
              <Heading level="h5" className="title-heading">
                My Profile
              </Heading>
            </Text>
            <Text className="profile-main-box">
              <Text className="profile-box flex gap-4 items-center">
                <Text className="dp-media relative">
                  {selectedFile ? (
                    <ImageCropper
                      dialogOpen={isDialogOpen}
                      setDialogOpen={setDialogOpen}
                      selectedFile={selectedFile}
                      setSelectedFile={setSelectedFile}
                    />
                  ) : (
                    <Avatar
                      {...getRootProps()}
                      className="cursor-pointer profile-user-img img-responsive img-circle"
                    >
                      <input {...getInputProps()} />
                      {/* <AvatarImage
                        src={fetchImage(
                          (myProfile as { image?: string })?.image ?? '',
                          'employees',
                        )}
                        alt={`${myProfile?.fname} ${myProfile?.lname}`}
                        width={70}
                        height={70}
                        className="profile-user-img img-responsive img-circle"
                      /> */}
                      <AsyncImage
                        src={dp ?? ''}
                        fallback={`/header/no-image.png`}
                        directory="employees"
                        classname="userDp"
                        alt={`${myProfile?.fname} ${myProfile?.lname}`}
                        width={70}
                        height={70}
                      />
                    </Avatar>
                  )}
                </Text>
                <Text className="pro-right-box grid gap-1">
                  <Heading level="h6" className="profile-username">
                    {myProfile?.fname} {myProfile?.lname}
                  </Heading>
                  <Text>
                    <Text variant="b" weight="semibold">
                      Employee Id:
                    </Text>{' '}
                    {myProfile?.employeeCode}
                  </Text>
                  <Text>
                    <Text variant="b" weight="semibold">
                      Designation:
                    </Text>{' '}
                    {myProfile?.designation_name}
                  </Text>
                </Text>
              </Text>
              <Text className="profile-user-pho-box">
                <Text className="official-email-strip">
                  <Text className="pr-1" variant="b" weight="semibold">
                    Official Email:
                  </Text>
                  <Link href={`mailto:${myProfile?.personal_email}`}>
                    {myProfile?.personal_email}
                  </Link>
                </Text>
                <Text className="official-phone-strip">
                  <Text className="pr-1" variant="b" weight="semibold">
                    Official Phone:
                  </Text>
                  <Link href={`tel:${myProfile?.mobile}`}>
                    {myProfile?.mobile}
                  </Link>
                </Text>
              </Text>
              <Text className="profile-branch-details">
                <Text>
                  <Text className="pr-1" variant="b" weight="semibold">
                    Home Branch:
                  </Text>
                  <span>{myProfile?.homeBranch}</span>
                </Text>
                <Text className="division-strip">
                  <Text className="pr-1" variant="b" weight="semibold">
                    Division:
                  </Text>
                  {userDivisions?.map((division: IDivision, index: number) => (
                    <span key={division.division_id}>
                      {division.division_name}
                      {index < userDivisions.length - 1 && ' | '}
                    </span>
                  ))}
                </Text>
                <Text className="functional-branch-tag">
                  <Text className="pr-1" variant="b" weight="semibold">
                    Functional Branch:
                  </Text>
                  <Text className="scrl-y">
                    {functionalBranches?.map(
                      (branch: IBranch, index: number) => (
                        <span key={branch.center_id}>
                          {branch.center_name}
                          {index < functionalBranches.length - 1 && ' | '}
                        </span>
                      ),
                    )}
                  </Text>
                </Text>
              </Text>
              <Text className="reset-admin-section flex justify-center gap-4 my-3">
                {links.map((link) => (
                  <Link
                    key={link.title}
                    href={link.href}
                    title={link.title}
                    className={`Reset-pass capitalize btn-${link.title}`}
                  >
                    <CommonImage
                      classname="profile-user-img img-responsive img-circle"
                      src={link.icon}
                      alt={link.alt}
                      width={link.width}
                      height={link.height}
                    />
                  </Link>
                ))}
              </Text>
            </Text>
          </Text>
        </DropdownMenuContent>
      </DropdownMenu>
    </Text>
  );
};
export default HeaderProfile;