import './permissionProfile.scss';

import React from 'react';

import Button from '../../../components/Button';
import Modal from '../../../components/Modal';
import Switch from '../../../components/Switch';
import { useTranslation } from 'react-i18next';

export type PermissionType =
  | 'paypay_information'
  | 'profile_info'
  | 'device_info';
interface Props {
  visible: boolean;
  toggleVisible: (v: boolean) => void;
  type: PermissionType;
  data: any;
  toggleSwitch: (type: PermissionType, index: number) => void;
  profileInfo: any;
  toggleEmailVisible: (v: boolean) => void;
}

const PermissionProfile: React.FC<Props> = (props) => {
  const {
    visible,
    toggleVisible,
    type,
    data,
    toggleSwitch,
    profileInfo,
    toggleEmailVisible,
  } = props;
  const { t } = useTranslation();
  const renderContents = () => {
    return (
      <>
        {renderRegisteredProfile()}
        {renderProfileSettings()}
        {renderDeviceInfo()}
      </>
    );
  };

  const renderRegisteredProfile = () => {
    return type === 'paypay_information' ? (
      <>
        <div className="central-title">
          {t('permissionCategory.paypay_information')}
        </div>
        {data && data.length > 0
          ? data.map((item: any, i: number) => {
              return (
                <>
                  <div className="divider" />
                  {item.name !== 'mini_app_user_email_address' ? (
                    <div className="profile-unit">
                      <div className="label-text">
                        {t(`${type}.${item.name}`)}
                      </div>
                      {item.type === 'must' ? (
                        <div className="mandatory-mark">必須</div>
                      ) : (
                        <div className="switch-wrapper">
                          <Switch
                            checked={item.checked}
                            toggleSwitch={() =>
                              toggleSwitch('paypay_information', i)
                            }
                          />
                        </div>
                      )}
                    </div>
                  ) : (
                    <>
                      <div className="mail-unit">
                        <div className="mail-address">
                          <div className="label-text">ユーザ識別子</div>
                          {item.type === 'must' ? (
                            <div className="mandatory-mark">必須</div>
                          ) : (
                            <div className="switch-wrapper">
                              <Switch
                                checked={item.checked}
                                toggleSwitch={() =>
                                  toggleSwitch('paypay_information', i)
                                }
                              />
                            </div>
                          )}
                        </div>
                        {profileInfo.email ? (
                          <>
                            <div className="mail-address-label">
                              {profileInfo.email}
                            </div>
                            <div className="mail-address-btn">
                              <Button className="plain-btn">
                                メールアドレスを変更
                              </Button>
                            </div>
                          </>
                        ) : (
                          <>
                            <div className="mail-address-label">未登録</div>
                            <div className="mail-address-btn">
                              <Button
                                className="plain-btn"
                                onClick={() => toggleEmailVisible(true)}
                              >
                                メールアドレスを登録
                              </Button>
                            </div>
                          </>
                        )}
                      </div>
                    </>
                  )}
                </>
              );
            })
          : null}
        <div className="divider" />
        <div className="btn-wrapper">
          <Button onClick={() => toggleVisible(false)} className="plain-btn">
            閉じる
          </Button>
        </div>
      </>
    ) : null;
  };
  const renderProfileSettings = () => {
    return type === 'profile_info' ? (
      <>
        <div className="central-title">
          {t('permissionCategory.profile_info')}
        </div>
        {data && data.length > 0
          ? data.map((item: any, i: number) => {
              return (
                <>
                  <div className="divider" />
                  <div className="profile-unit">
                    <div className="label-text">
                      <div>{t(`${type}.${item.name}`)}</div>
                      {/* <div className="sub-text">未登録</div> */}
                    </div>
                    {item.type === 'must' ? (
                      <div className="mandatory-mark">必須</div>
                    ) : (
                      <div className="switch-wrapper">
                        <Switch
                          checked={item.checked}
                          toggleSwitch={() => toggleSwitch('profile_info', i)}
                        />
                      </div>
                    )}
                  </div>
                </>
              );
            })
          : null}
        {/*
        <div className="divider" />
        <div className="profile-unit">
          <div className="label-text">
            <div>姓名（カナ）</div>
            <div className="sub-text">あああああ</div>
          </div>
          <div className="mandatory-mark mark-container">必須</div>
        </div>
        <div className="divider" />
        <div className="mail-unit">
          <div className="mail-address-btn">
            <Button className="plain-btn">プロフィール情報を変更</Button>
          </div>
        </div> */}
        <div className="divider" />
        <div className="btn-wrapper">
          <Button onClick={() => toggleVisible(false)} className="plain-btn">
            閉じる
          </Button>
        </div>
      </>
    ) : null;
  };
  const renderDeviceInfo = () => {
    return type === 'device_info' ? (
      <>
        <div className="central-title">
          {t('permissionCategory.device_info')}
        </div>
        {data && data.length > 0
          ? data.map((item: any, i: number) => {
              return (
                <>
                  <div className="divider" />
                  <div className="profile-unit">
                    <div className="label-text">
                      <div>{t(`${type}.${item.name}`)}</div>
                      {/* <div className="sub-text">未登録</div> */}
                    </div>
                    {item.type === 'must' ? (
                      <div className="mandatory-mark">必須</div>
                    ) : (
                      <div className="switch-wrapper">
                        <Switch
                          checked={item.checked}
                          toggleSwitch={() => toggleSwitch('device_info', i)}
                        />
                      </div>
                    )}
                  </div>
                </>
              );
            })
          : null}
        <div className="divider" />
        <div className="btn-wrapper">
          <Button onClick={() => toggleVisible(false)} className="plain-btn">
            閉じる
          </Button>
        </div>
      </>
    ) : null;
  };
  return (
    <Modal visible={visible} className="permissionProfile-modal">
      {renderContents()}
    </Modal>
  );
};

export default PermissionProfile;