import React from 'react';
import Modal from '../../../components/Modal';
import ImageIcon from '../../../components/ImageIcon';
import Button from '../../../components/Button';

import './mandatoryInfo.scss';

interface Props {
  visible: boolean;
  toggleVisible: (v: boolean) => void;
  profileInfo: any;
  isShowEmail: boolean;
  isShowProfile: boolean;
  isBlocker: boolean;
}

const MandatoryInfo: React.FC<Props> = (props) => {
  const {
    visible,
    toggleVisible,
    profileInfo,
    isShowEmail,
    isShowProfile,
    isBlocker,
  } = props;
  const cancelRegister = () => {
    toggleVisible(false);
  };
  return (
    <Modal visible={visible} className="mandatoryInfo-modal">
      <div className="mandatoryInfo">
        <div className="header-setion">
          <div className="icon-section">
            {profileInfo.photoUrl ? (
              <ImageIcon customUrl={profileInfo.photoUrl} />
            ) : null}
          </div>
          <div className="text-area">
            <div className="miniapp-name">ご確認ください</div>
            <div className="subtitle">
              アプリ名アプリ名アプリ名アプリ名アプリ名を
              利用するには、以下の情報の登録が必要です
            </div>
          </div>
        </div>
        <div className="confirm-area">
          {isShowEmail ? (
            <div className="single-line">
              <ImageIcon src="icon-email" type="svg" />
              <div className="label-container line-label">
                メールアドレスを登録する
              </div>
              <div className="arrow-unit">
                <i className="arrow right"></i>
              </div>
            </div>
          ) : null}
          {isShowProfile ? (
            <div className="double-lines">
              <ImageIcon src="icon-profile" type="svg" />
              <div className="label-container">
                <div className="label-wrapper">
                  <span className="line-label">プロフィール情報を登録する</span>
                  {/* <span className="right-label">再登録</span> */}
                </div>
                <div className="sub-text">
                  姓名（漢字、カナ）、表示名、プロフィール画像が必要です
                </div>
              </div>
              <div className="arrow-unit">
                <i className="arrow right"></i>
              </div>
            </div>
          ) : null}
        </div>
        <div className="btn-agreement">
          <div>
            <Button className="btn-block negative-btn" onClick={cancelRegister}>
              {isBlocker ? 'キャンセル' : 'あとで登録する'}
            </Button>
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default MandatoryInfo;