import './requestPermission.scss';

import React, { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';

import Button from '../../components/Button';
import ImageIcon from '../../components/ImageIcon';
import Modal from '../../components/Modal';
import { MiniAppContext, IPreviewImage } from '../../context/miniAppContext';
import { editUserPermission } from '../../factory/api';
import { joinWorkspaceImg } from '../../utils/helperFunctions';
import EmailAddress from './EmailAddress';
import MandatoryInfo from './MandatoryInfo';
import PermissionProfile, { PermissionType } from './PermissionProfile';

export interface RequestPermissionProps {
  visible: boolean;
  toggleVisible: (v: boolean) => void;
  permissionInfo: any;
  successCB: (res: any) => void;
  failCB: () => void;
  profileInfo: any;
}

const RequestPermission: React.FC<RequestPermissionProps> = (props) => {
  const {
    visible,
    toggleVisible,
    permissionInfo,
    successCB,
    failCB,
    profileInfo,
  } = props;
  const { state } = useContext(MiniAppContext);
  const [previewImg, setPreviewImg] = useState<any>();
  const [type, setType] = useState<PermissionType>('paypay_information');
  const [subVisible, setSubVisible] = useState(false);
  const [mandatoryVisible, setMandatoryVisible] = useState(false);
  const { t } = useTranslation();
  const [emailVisible, setEmailVisible] = useState(false);
  const [permissionInfoState, setPermissionInfoState] = useState<any>({
    paypay_information: {},
    profile_info: {},
    device_info: {},
  });
  const [isBlocker, setIsBlocker] = useState(false);
  const [isShowEmail, setIsShowEmail] = useState(false);
  const [isShowProfile, setIsShowProfile] = useState(false);
  useEffect(() => {
    setPermissionInfoState(permissionInfo);
  }, [permissionInfo]);
  useEffect(() => {
    const previewImgData =
      state.headerImage && state.headerImage.length > 0
        ? {
            'background-image': `url(${joinWorkspaceImg(state.headerImage)})`,
            'background-size': 'cover',
          }
        : {
            background: '#fff',
          };
    setPreviewImg(previewImgData);
  }, [state.headerImage]);
  const openSubInfoModal = (type: PermissionType) => {
    setType(type);
    setSubVisible(true);
  };
  const toggleSwitch = (type: PermissionType, index: number) => {
    permissionInfoState[type][index].checked = !permissionInfoState[type][index]
      .checked;
    setPermissionInfoState({ ...permissionInfoState });
  };
  const [previewImgs, setPreviewImgs] = useState<Array<string | IPreviewImage>>(
    []
  );
  useEffect(() => {
    if (state.previewImagesV2 && state.previewImagesV2.length > 0) {
      setPreviewImgs(state.previewImagesV2);
    } else if (state.previewImages && state.previewImages.length > 0) {
      setPreviewImgs(state.previewImages);
    }
  }, [state.previewImages, state.previewImagesV2]);
  const openPreview = (img: string | IPreviewImage) => {
    if (img.link && img.link.length > 0) {
      window.postMessage(
        JSON.stringify({
          event: 'openWebview',
          payload: {
            style: 'modal',
            url: img.link,
          },
        }),
        '*'
      );
    }
  };
  const joinWorkspaceImgPreview = (img: string | IPreviewImage) => {
    if (typeof img === 'string') {
      return joinWorkspaceImg(img);
    } else {
      return joinWorkspaceImg(img.path);
    }
  };
  const agreeAction = async () => {
    const isShowEmail = !!profileInfo.email;
    const emailItem = permissionInfoState['paypay_information'].find(
      (item: any) => item.name === 'mini_app_user_email_address'
    );
    const isBlocker = emailItem.type === 'must' && emailItem.isBlocker;
    const isShowProfile = !(
      profileInfo.photoUrl &&
      profileInfo.displayName &&
      profileInfo.firstName &&
      profileInfo.lastName &&
      profileInfo.lastNameKana &&
      profileInfo.firstNameKana
    );
    if (isShowEmail || isShowProfile) {
      setIsShowEmail(isShowEmail);
      setIsShowProfile(isShowProfile);
      setIsBlocker(isBlocker);
      setMandatoryVisible(true);
    } else {
      try {
        const params = Object.keys(permissionInfoState).reduce(
          (res: any, ns) => {
            permissionInfoState[ns].forEach((element: any) => {
              if (element.checked) {
                res.add = [...res.add, element.name];
              } else {
                res.remove = [...res.remove, element.name];
              }
            });
            return res;
          },
          { add: [], remove: [] }
        );
        const response: any = await editUserPermission(params);
        if (response?.data?.signed?.result_info?.code === 'SUCCESS') {
          successCB(response.data.unsigned.data.scopes);
        }
      } catch (error) {
        toast.error('Edit permisions failed.');
      } finally {
        toggleVisible(false);
      }
    }
  };
  return (
    <Modal visible={visible} className="requestPermission-modal">
      <div className="requestPermission-preview" style={previewImg} />
      <div className="requestPermission">
        <div className="scroll-area">
          <div className="header-setion">
            <div className="icon-section">
              {profileInfo.photoUrl ? (
                <ImageIcon customUrl={profileInfo.photoUrl} />
              ) : null}
            </div>
            <div className="text-area-name">
              <div className="miniapp-name">{state.appName}</div>
            </div>
            <div className="scroll-container">
              {previewImgs && previewImgs.length > 0 ? (
                <div className="scrolling-wrapper-flexbox">
                  {previewImgs.map((img: string | IPreviewImage) => {
                    return (
                      <div
                        role="button"
                        tabIndex={0}
                        className="card"
                        onClick={() => openPreview(img)}
                      >
                        <img src={joinWorkspaceImgPreview(img)} alt="" />
                      </div>
                    );
                  })}
                </div>
              ) : null}
              <div className="text-area-title">
                <div className="subtitle">
                  サービス提供者に対して以下の情報を提供します
                </div>
              </div>
            </div>
          </div>
          <div className="divider" />
          <div className="permission-list">
            <div
              role="button"
              tabIndex={0}
              className="list-unit"
              onClick={() => openSubInfoModal('paypay_information')}
            >
              <div className="tick-unit">
                <ImageIcon className="tick-unit" src="check-green"></ImageIcon>
              </div>
              <div className="permission-name">
                <span>{t('permissionCategory.paypay_information')}</span>
              </div>
              <div className="arrow-unit">
                <i className="arrow down"></i>
              </div>
            </div>

            <div
              role="button"
              tabIndex={-1}
              className="list-unit"
              onClick={() => openSubInfoModal('profile_info')}
            >
              <div className="tick-unit">
                <ImageIcon className="tick-unit" src="check-green"></ImageIcon>
              </div>
              <div className="permission-name">
                <span>{t('permissionCategory.profile_info')}</span>
              </div>
              <div className="arrow-unit">
                <i className="arrow down"></i>
              </div>
            </div>

            <div
              role="button"
              tabIndex={-2}
              className="list-unit"
              onClick={() => openSubInfoModal('device_info')}
            >
              <div className="tick-unit">
                <ImageIcon className="tick-unit" src="check-green"></ImageIcon>
              </div>
              <div className="permission-name">
                <span>{t('permissionCategory.device_info')}</span>
              </div>
              <div className="arrow-unit">
                <i className="arrow down"></i>
              </div>
            </div>
          </div>
          {/* <div className="divider" />
          <div className="policy">
            <div className="policy-unit text1">以下に同意します</div>
            <div className="policy-unit text2">あいうえおの利用規約</div>
            <div className="policy-unit text2">プライバシーポリシー</div>
            <div className="policy-unit text3">
              フリーテキストフリーテキストフリーテキストフリーテキストフリーテキストフリーテキスト
            </div>
          </div> */}
        </div>
        <div className="agreement-area">
          <div className="divider" />
          <div className="divider" />
          <div className="btn-agreement">
            <div className="agreement-title">
              この機能は会社名会社名会社名が提供するサービスであり、
              PayPayのサービスではありません
            </div>
            <div>
              <Button
                onClick={() => agreeAction()}
                className="btn-block"
                btnType="primary"
              >
                上記に同意して続ける
              </Button>
            </div>
            <div>
              <Button
                onClick={() => {
                  failCB();
                  toggleVisible(false);
                }}
                className="btn-block negative-btn"
              >
                同意しない
              </Button>
            </div>
          </div>
        </div>
      </div>
      <PermissionProfile
        visible={subVisible}
        toggleVisible={setSubVisible}
        type={type}
        data={permissionInfoState[type]}
        toggleSwitch={toggleSwitch}
        profileInfo={profileInfo}
        toggleEmailVisible={setEmailVisible}
      />
      <EmailAddress visible={emailVisible} toggleVisible={setEmailVisible} />
      <MandatoryInfo
        visible={mandatoryVisible}
        toggleVisible={setMandatoryVisible}
        profileInfo={profileInfo}
        isShowEmail={isShowEmail}
        isShowProfile={isShowProfile}
        isBlocker={isBlocker}
      />
    </Modal>
  );
};

export default RequestPermission;