import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

export const KakaoPaymentNotificationSettingPage = () => {
  const { navigate } = useNavigate();

  useSetHeaderTitle('알림톡 결제통보');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.additionalService.kakaoPaymentNotification.list);
  });

  const onClickToSave = () => {
    
  };

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list pb-120">
              <div className="service-settings">
                <div className="service-notice">
                  <div>알림톡을 발송할 대상을 설정할 수 있습니다.</div>
                  <div>알림톡 발송 대상과 유형을 설정해 주세요.</div>
                </div>

                <div className="service-merchant">
                  <div className="service-title">가맹점</div>
                  <div className="service-select">
                    <select>
                      <option>nictest001m</option>
                    </select>
                    <span className="ic20 arrow-down" aria-hidden="true"></span>
                  </div>
                </div>

                <div className="service-section">
                  <div className="service-row align-right">
                    <span>가맹점에 발송</span>
                    <span>고객에게 발송</span>
                  </div>
                </div>

                <div className="service-section">
                  <div className="service-row">
                    <span>신용카드(승인)</span>
                    <div className="switch-group">
                      <label className="settings-switch">
                        <input type="checkbox"/>
                        <span className="slider"></span>
                      </label>
                      <label className="settings-switch">
                        <input type="checkbox"/>
                        <span className="slider"></span>
                      </label>
                    </div>
                  </div>
                  <div className="service-row">
                    <span>신용카드(취소)</span>
                    <div className="switch-group">
                      <label className="settings-switch">
                        <input type="checkbox" checked/>
                        <span className="slider"></span>
                      </label>
                      <label className="settings-switch">
                        <input type="checkbox" checked/>
                        <span className="slider"></span>
                      </label>
                    </div>
                  </div>
                  <div className="service-row">
                    <span>계좌이체(승인)</span>
                    <div className="switch-group">
                      <label className="settings-switch">
                        <input type="checkbox" checked/>
                        <span className="slider"></span>
                      </label>
                      <label className="settings-switch">
                        <input type="checkbox" checked/>
                        <span className="slider"></span>
                      </label>
                    </div>
                  </div>
                  <div className="service-row">
                    <span>계좌이체(취소)</span>
                    <div className="switch-group">
                      <label className="settings-switch">
                        <input type="checkbox" checked/>
                        <span className="slider"></span>
                      </label>
                      <label className="settings-switch">
                        <input type="checkbox" checked/>
                        <span className="slider"></span>
                      </label>
                    </div>
                  </div>
                  <div className="service-row">
                    <span>가상계좌(입금요청)</span>
                    <div className="switch-group">
                      <label className="settings-switch">
                        <input type="checkbox"/>
                        <span className="slider"></span>
                      </label>
                      <label className="settings-switch">
                        <input type="checkbox"/>
                        <span className="slider"></span>
                      </label>
                    </div>
                  </div>
                  <div className="service-row">
                    <span>가상계좌(입금완료)</span>
                    <div className="switch-group">
                      <label className="settings-switch">
                        <input type="checkbox"/>
                        <span className="slider"></span>
                      </label>
                      <label className="settings-switch">
                        <input type="checkbox"/>
                        <span className="slider"></span>
                      </label>
                    </div>
                  </div>
                  <div className="service-row">
                    <span>가상계좌(환불)</span>
                    <div className="switch-group">
                      <label className="settings-switch">
                        <input type="checkbox"/>
                        <span className="slider"></span>
                      </label>
                      <label className="settings-switch">
                        <input type="checkbox"/>
                        <span className="slider"></span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToSave() }
              >저장</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};