import React, {
  memo, useCallback, useEffect, useRef,
} from '../../../lib/teact/teact';
import { getActions } from '../../../global';

import type { FC } from '../../../lib/teact/teact';
import type { ApiPhoto } from '../../../api/types';

import useFlag from '../../../hooks/useFlag';
import useLang from '../../../hooks/useLang';

import ListItem from '../../ui/ListItem';
import SelectAvatar from '../../ui/SelectAvatar';
import Avatar from '../../common/Avatar';
import ConfirmDialog from '../../ui/ConfirmDialog';

import styles from './SettingsPrivacyPublicPhoto.module.scss';

type OwnProps = {
  currentUserId: string;
  hasCurrentUserFullInfo?: boolean;
  currentUserFallbackPhoto?: ApiPhoto;
};

const SettingsPrivacyPublicProfilePhoto: FC<OwnProps> = ({
  currentUserId,
  hasCurrentUserFullInfo,
  currentUserFallbackPhoto,
}) => {
  const {
    loadFullUser, uploadProfilePhoto, deleteProfilePhoto, showNotification,
  } = getActions();

  const lang = useLang();

  const [isDeleteFallbackPhotoModalOpen, openDeleteFallbackPhotoModal, closeDeleteFallbackPhotoModal] = useFlag(false);

  // eslint-disable-next-line no-null/no-null
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!hasCurrentUserFullInfo) {
      loadFullUser({ userId: currentUserId });
    }
  }, [hasCurrentUserFullInfo, currentUserId, loadFullUser]);

  const handleSelectFile = useCallback((file: File) => {
    uploadProfilePhoto({
      file,
      isFallback: true,
    });
    showNotification({
      message: lang('Privacy.ProfilePhoto.PublicPhotoSuccess'),
    });
  }, [lang, showNotification, uploadProfilePhoto]);

  const handleConfirmDelete = useCallback(() => {
    closeDeleteFallbackPhotoModal();
    deleteProfilePhoto({ photo: currentUserFallbackPhoto! });
  }, [closeDeleteFallbackPhotoModal, deleteProfilePhoto, currentUserFallbackPhoto]);

  const handleOpenFileSelector = useCallback(() => {
    inputRef.current?.click();
  }, []);

  return (
    <div className="settings-item">
      <ListItem
        icon="camera-add"
        onClick={handleOpenFileSelector}
      >
        <SelectAvatar
          onChange={handleSelectFile}
          inputRef={inputRef}
        />
        {lang(currentUserFallbackPhoto
          ? 'Privacy.ProfilePhoto.UpdatePublicPhoto'
          : 'Privacy.ProfilePhoto.SetPublicPhoto')}
      </ListItem>
      {currentUserFallbackPhoto && (
        <ListItem
          leftElement={<Avatar photo={currentUserFallbackPhoto} size="mini" className={styles.fallbackPhoto} />}
          onClick={openDeleteFallbackPhotoModal}
          destructive
        >
          {lang(currentUserFallbackPhoto.isVideo
            ? 'Privacy.ProfilePhoto.RemovePublicVideo'
            : 'Privacy.ProfilePhoto.RemovePublicPhoto')}
          <ConfirmDialog
            isOpen={isDeleteFallbackPhotoModalOpen}
            onClose={closeDeleteFallbackPhotoModal}
            text={lang('Privacy.ResetPhoto.Confirm')}
            confirmLabel={lang('Delete')}
            confirmHandler={handleConfirmDelete}
            confirmIsDestructive
          />
        </ListItem>
      )}
      <p className="settings-item-description-larger" dir={lang.isRtl ? 'rtl' : undefined}>
        {lang('Privacy.ProfilePhoto.PublicPhotoInfo')}
      </p>
    </div>
  );
};

export default memo(SettingsPrivacyPublicProfilePhoto);