import './cameraPermission.scss';

import React from 'react';

import Button from '../../components/Button/button';
import ImageIcon from '../../components/ImageIcon';
import Modal from '../../components/Modal';

interface Props {
  visible: boolean;
  isLibrary: boolean;
  isDenied: boolean;
}

export const cameraPermission: React.FC<Props> = (props) => {
  const { visible, isLibrary, isDenied } = props;

  const renderContents = () => {
    let configs;
    if (isLibrary) {
      configs = !isDenied
        ? {
            iconName: 'iconMiniappLibraryPermission',
            title: 'カメラロールへのアクセスを許可しましょう',
            text: 'カメラロールの利用にはアクセスを許可する必要があります',
            btnText: '許可する',
          }
        : {
            iconName: 'iconMiniappLibraryError',
            title: 'カメラロールへのアクセスが許可されていません',
            text: 'iPhoneの設定＞PayPay＞写真からアクセスを許可してください',
            btnText: '設定を変更する',
          };
    } else {
      configs = !isDenied
        ? {
            iconName: 'iconMiniappCameraPermission',
            title: 'カメラの利用を許可しましょう',
            text: '撮影にはカメラの利用を許可する必要があります',
            btnText: '許可する',
          }
        : {
            iconName: 'iconMiniappCameraError',
            title: 'カメラの利用が許可されていません',
            text: 'iPhoneの設定＞PayPay＞カメラから利用を許可してください',
            btnText: '設定を変更する',
          };
    }
    return (
      <>
        <div>
          <ImageIcon src={configs.iconName} />
        </div>
        <div className="cameraPermission-title">{configs.title}</div>
        <div className="cameraPermission-text">{configs.text}</div>
        <Button btnType="primary">{configs.btnText}</Button>
      </>
    );
  };

  return (
    <Modal visible={visible} className="cameraPermission">
      <div className="cameraPermission-container">
        <div className="cameraPermission-header">
          <ImageIcon
            className="cameraPermission-close-icon"
            src="iconHalfsheetClose"
          />
        </div>
        <div className="cameraPermission-contents">{renderContents()}</div>
      </div>
    </Modal>
  );
};

export default cameraPermission;