import './miniAppSettings.scss';

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

import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonItem,
  IonItemDivider,
  IonLabel,
  IonList,
  IonListHeader,
  IonTitle,
  IonToolbar,
} from '@ionic/react';

import Button from '../../components/Button';
import Modal from '../../components/Modal';
import Switch from '../../components/Switch';
import { MiniAppContext } from '../../context/miniAppContext';

export interface MiniAppSettingsProps {
  visible: boolean;
  toggleVisible: (v: boolean) => void;
}
const MiniAppSettings: React.FC<MiniAppSettingsProps> = (props) => {
  const { t } = useTranslation();
  const { visible, toggleVisible } = props;
  const { state, dispatch } = useContext(MiniAppContext);
  const [navigationStyle, setNavigationStyle] = useState('none');
  useEffect(() => {
    if (state.window.navigationStyle !== 'none' && visible) {
      setNavigationStyle(state.window.navigationStyle || 'none');
      dispatch({
        type: 'UPDATE_WINDOW',
        payload: { navigationStyle: 'none' },
      });
    }
    if (!visible && navigationStyle !== 'none') {
      dispatch({
        type: 'UPDATE_WINDOW',
        payload: { navigationStyle },
      });
    }
  }, [state.window.navigationStyle, dispatch, visible, navigationStyle]);
  return (
    <Modal visible={visible} className="MiniAppSettings">
      <div className="settings-container">
        <IonHeader translucent className="MiniAppSettings-toolbar">
          <IonToolbar>
            <IonButtons slot="start">
              <IonButton onClick={() => toggleVisible(false)}>
                {t('button.close')}
              </IonButton>
            </IonButtons>
            <IonTitle>{t('menuSheet.settings')}</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent fullscreen>
          <IonList>
            <IonListHeader lines="full">
              <IonLabel className="list-title">お知らせの受信</IonLabel>
            </IonListHeader>
            <IonItem>
              <div className="settings-unit mail-unit">
                <div className="mail-address">
                  <div className="label-text">サービスからのお知らせ</div>
                  <div className="mandatory-mark">必須</div>
                </div>
                <div className="sub-description-label">
                  おトクな情報などをお届けします
                </div>
              </div>
            </IonItem>
          </IonList>

          <IonList>
            <IonListHeader lines="full">
              <IonLabel className="list-title">許可している情報</IonLabel>
            </IonListHeader>
            <IonItemDivider>
              <div>PayPayに登録されている情報</div>
            </IonItemDivider>
            <IonItem>
              <div className="settings-unit profile-unit">
                <div className="label-text">電話番号</div>
                <div className="switch-wrapper">
                  <Switch
                    checked
                    // toggleSwitch={() => toggleSwitch('paypay_information', i)}
                  />
                </div>
              </div>
            </IonItem>
            <IonItem>
              <div className="settings-unit mail-unit">
                <div className="mail-address">
                  <div className="label-text">メールアドレス</div>
                  <div className="mandatory-mark">必須</div>
                </div>
                <div className="mail-address-label">未登録</div>
                <div className="mail-address-btn">
                  <Button className="plain-btn">メールアドレスを登録</Button>
                </div>
              </div>
            </IonItem>
            <IonItem>
              <div className="settings-unit profile-unit">
                <div className="label-text">PayPay残高の参照</div>
                <div className="switch-wrapper">
                  <Switch
                    checked
                    // toggleSwitch={() => toggleSwitch('paypay_information', i)}
                  />
                </div>
              </div>
            </IonItem>
            <IonItem>
              <div className="settings-unit mail-unit">
                <div className="mail-address">
                  <div className="label-text">氏名</div>
                  <div className="switch-wrapper">
                    <Switch checked />
                  </div>
                </div>
                <div className="mail-address-label">未登録</div>
              </div>
            </IonItem>
            <IonItem>
              <div className="settings-unit mail-unit">
                <div className="mail-address">
                  <div className="label-text">表示名</div>
                  <div className="switch-wrapper">
                    <Switch checked />
                  </div>
                </div>
                <div className="phonenumber">080808080</div>
              </div>
            </IonItem>
            <IonItem>
              <div className="settings-unit mail-unit">
                <div className="mail-address">
                  <div className="label-text">プロフィール画像</div>
                  <div className="switch-wrapper">
                    <Switch checked />
                  </div>
                </div>
                <div className="mail-address-label">未登録</div>
                <div className="mail-address-btn">
                  <Button className="plain-btn">メールアドレスを登録</Button>
                </div>
              </div>
            </IonItem>

            <IonItemDivider>
              <div>本人確認情報</div>
            </IonItemDivider>
            <IonItem>
              <div className="settings-unit profile-unit">
                <div className="label-text">本人確認情報</div>
                <div className="switch-wrapper">
                  <Switch
                    checked
                    // toggleSwitch={() => toggleSwitch('paypay_information', i)}
                  />
                </div>
              </div>
            </IonItem>

            <IonItemDivider>
              <div>支払い方法</div>
            </IonItemDivider>
            <IonItem>
              <div className="settings-unit mail-unit">
                <div className="mail-address">
                  <div className="label-text">決済時にPayPayでの支払い</div>
                  <div className="mandatory-mark">必須</div>
                </div>
              </div>
            </IonItem>

            <IonItemDivider>
              <div>現在位置情報</div>
            </IonItemDivider>
            <IonItem>
              <div className="settings-unit profile-unit">
                <div className="label-text">現在位置情報</div>
                <div className="switch-wrapper">
                  <Switch
                    checked
                    // toggleSwitch={() => toggleSwitch('paypay_information', i)}
                  />
                </div>
              </div>
            </IonItem>

            <IonItemDivider>
              <div>デバイスへのアクセス</div>
            </IonItemDivider>
            <IonItem>
              <div className="settings-unit profile-unit">
                <div className="label-text">カメラへのアクセス</div>
                <div className="switch-wrapper">
                  <Switch
                    checked
                    // toggleSwitch={() => toggleSwitch('paypay_information', i)}
                  />
                </div>
              </div>
            </IonItem>
            <IonItem>
              <div className="settings-unit profile-unit">
                <div className="label-text">写真へのアクセス</div>
                <div className="switch-wrapper">
                  <Switch
                    checked
                    // toggleSwitch={() => toggleSwitch('paypay_information', i)}
                  />
                </div>
              </div>
            </IonItem>
            <IonItem>
              <div className="settings-unit profile-unit">
                <div className="label-text">連絡先へのアクセス</div>
                <div className="switch-wrapper">
                  <Switch
                    checked
                    // toggleSwitch={() => toggleSwitch('paypay_information', i)}
                  />
                </div>
              </div>
            </IonItem>

            <IonItemDivider>
              <div>デバイス情報</div>
            </IonItemDivider>
            <IonItem>
              <div className="settings-unit profile-unit">
                <div className="label-text">端末のバッテリー情報</div>
                <div className="switch-wrapper">
                  <Switch
                    checked
                    // toggleSwitch={() => toggleSwitch('paypay_information', i)}
                  />
                </div>
              </div>
            </IonItem>
          </IonList>
        </IonContent>
      </div>
    </Modal>
  );
};

export default MiniAppSettings;