import React, {useCallback, useMemo, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Coachmark, CoachmarkStep} from '@components';
import {
  getItemFromStorageSync,
  LocalStorageKeys,
  setItemFromStorage,
} from '@services/localStorage';

function DownloadCertificateNewFeatureModal() {
  const {t} = useTranslation();
  const [isVisible, setIsVisible] = useState(
    getItemFromStorageSync({
      key: LocalStorageKeys.DOWNLOAD_CERTIFICATE_NEW_FEATURE_SEEN,
    }) !== 'true',
  );

  const onClose = useCallback(() => {
    setItemFromStorage({
      key: LocalStorageKeys.DOWNLOAD_CERTIFICATE_NEW_FEATURE_SEEN,
      value: 'true',
    });
    setIsVisible(false);
  }, []);

  const steps: CoachmarkStep[] = useMemo(
    () => [
      {
        title: t('service_management.new_feature.download_certificate_title'),
        description: t(
          'service_management.new_feature.download_certificate_description',
        ),
        video: require('../../assets/certificate.mp4'),
      },
    ],
    [t],
  );

  return (
    <Coachmark
      isVisible={isVisible}
      onClose={onClose}
      steps={steps}
      withCloseButton
    />
  );
}

export default DownloadCertificateNewFeatureModal;