const { useEffect, useState } = React;

// エラーメッセージ表示枠
function FlashMessage(props) {
    const lbToBr = (txt) => {
        return (
            txt.split(/(\n)/g).map(t => (t === '\n')?<br/>:t)
        )
    }
    /*
    if (props.flashmessage) {
        setTimeout(function(){
            props.setFlashMessage('');
        },app_config.flashmessageSec);
    }
    */
    return (
        <small>{lbToBr(props.flashmessage)}</small>
    );
};
const FlashMessageContainer = ReduxConnect(mapStateToProps,mapDispatchToProps)(FlashMessage);

// メイン処理
function Main(props) {
    const lc_setflashmessage=props.setFlashMessage;
	const [reason, setReason] = useState("");

    useEffect(() => {
        $('#btnwithdraw').addClass('disabled');
        setValidate();
    }, []);

    // チェックボックス
    function handleChange(checked) {
        if (checked) {
            $('#btnwithdraw').removeClass('disabled');
        } else {
            $('#btnwithdraw').addClass('disabled');
        }
    }

    // 登録
    function handleFormSubmit(e) {
        e.preventDefault();
        
        ButtonDisabledProc(false);
        
        // localStorageからtokenを取得
        let json = new JsonStorage('token');
        let token=json.load();
        
        // APICall 会員属性情報登録
        let param={
            "token": token,
            "message": reason
        };
        api('delete-member-account',param)
        .then(result => {
            if (0==result.result) {
                location.replace('./profile_regist_complete.html?mode=D');
            } else {
                // API　アプリケーションエラー
                window.scrollTo(0,0);
                lc_setflashmessage(result.error_info.description);
            }
            ButtonDisabledProc(true);
        })
        .catch(result => {
            // ログ出力
            let param={
                "trace_kind": "E",
                "trace_contents": "delete-member-account call : "+result.message,
                "email": null,
                "token": token,
                "shadai_no": null    
            };
            api('insert-tracelog',param);
            window.scrollTo(0,0);
            lc_setflashmessage('予期しないエラーが発生しました');
            ButtonDisabledProc(true);
        });
    }

	return (
        <div className="container">
            <p className="error-title fw-medium text-alert mb-4">
                <FlashMessageContainer/>
            </p>
            <form method="post" autoComplete="off" onSubmit={handleFormSubmit} noValidate>
                <p>退会すると以下の例のような会員サービスがご利用いただけなくなります。</p>
                <ul>
                    <li>無料洗車オンライン予約</li>
                    <li>ATレクサスイベント参加申込</li>
                    <li>ATグループ公式アプリ「オーナーズ」の会員機能</li>
                    <li>ATグループ合同中古車サイトの会員機能</li>
                </ul>
                <div className="item-group mt-5">
                    <label htmlFor="checkwithdraw" className="label">
                        <input id="checkwithdraw" type="checkbox" onChange={(e) => {handleChange(e.target.checked)}}/>
                        {/* Update 2022.11.30 by Miura
                        <span>上記の内容に同意する</span>
                        */}
                        <span id="span-consent-analytics">上記の内容に同意する</span>
                    </label>
                </div>
                <div className="item-group mt-5">
                    <div className="item-title">差し支えなければ、退会理由をお聞かせください。</div>
                    {/* <div className="item-space">：</div> */}
                    <textarea className="form-control form-font-weight" rows="5" name="note" id="note" value={reason} onChange={(e) => {setReason(e.target.value)}}></textarea>
                </div>
                <button id="btnwithdraw" name="buttonDisabled" type="submit" className="btn btn-tisa rounded-pill w-100 fw-medium mt-5">退会する</button>
            </form>
            <button onClick={(e) => {location.replace('./profile.html')}} className="btn btn-outline-tisa rounded-pill w-100 fw-medium mt-5 mb-7">戻る</button>
        </div>
	);
};
const MainContainer = ReduxConnect(mapStateToProps,mapDispatchToProps)(Main);
ReactDOM.render(
    <ReduxProvider store={ReduxStore}>
	    <MainContainer />
    </ReduxProvider>
	,document.getElementById('main-container')
);