import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

import Notification from '../../component/notification';

const meeting_list = [
    {
        first_name: '田中',
        last_name:'達也',
        image:'/assets/img/avatar/avatar-sample03@2x.png',
        title:'ミーティングタイトルミーティングタイトルミーテ',
        text:'ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティングミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング',
        meeting_approval:{
            approve_at:'2021/7/21',
            updated_at:'2021/7/21'
        }
    },
    {
        first_name: '田中',
        last_name:'達也',
        image:'/assets/img/avatar/avatar-sample03@2x.png',
        title:'ミーティングタイトルミーティングタイトルミーテ',
        text:'ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティングミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング',
        meeting_approval:{
            approve_at:'2021/7/21',
            updated_at:'2021/7/21'
        }
    },
    {
        first_name: '田中',
        last_name:'達也',
        image:'/assets/img/avatar/avatar-sample03@2x.png',
        title:'ミーティングタイトルミーティングタイトルミーテ',
        text:'ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティングミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング',
        meeting_approval:{
            approve_at:'2021/7/21',
            updated_at:'2021/7/21'
        }
    },
    {
        first_name: '田中',
        last_name:'達也',
        image:'/assets/img/avatar/avatar-sample03@2x.png',
        title:'ミーティングタイトルミーティングタイトルミーテ',
        text:'ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティングミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング',
        meeting_approval:{
            approve_at:'2021/7/21',
            updated_at:'2021/7/21'
        }
    }
]


const Meeting = () => {

    const [tab_status, setTabStatus] = useState(false);
    // const [meeting_list, setMettingList] = useState([]);

    const clickTab01 = () => {
        setTabStatus(false);
    }

    const clickTab02 = () => {
        setTabStatus(true);
    }

    useEffect(
        () => {
            const formdata = new FormData();
            let child_id = 1;

            // axios.get('/api/meetings/list')
            // .then(response => {
            //     if(response.data.status_code==200){
            //         // window.location.href = '/register/c-account/complete';
            //         console.log(response.data)
            //     }
            //     else if(response.data.status_code==400){
            //         // window.location.href = '/register/c-account/error';
            //     }
            //     else if(response.data.status_code==500){
            //         // window.location.href = '/unknown-error';
            //     }
            // })
            // .catch(err=>console.log(err))
        },[]
    );
    
	return (
        <>
            <div className="l-content__ttl">
                <div className="l-content__ttl__left">
                    <h2>ミーティング一覧</h2>
                </div>
                <Notification/>
            </div>

            <div className="l-content-wrap">
                <section className="meeting-tab-container">
                    <div className="meeting-tab-wrap">
                        <div className="meeting-head">
                            <input className="tab-switch" id="tab-01" type="radio" name="tab_btn"/>
                            <input className="tab-switch" id="tab-02" type="radio" name="tab_btn"/>
                
                            <div className="meeting-tab">
                                <label className={`tab-label ${!tab_status && 'is-active'} `} htmlFor="tab-01" onClick={clickTab01}><span>未承知</span></label>
                                <label className={`tab-label ${tab_status && 'is-active'} `} htmlFor="tab-02"  onClick={clickTab02}><span>承知済み</span></label>
                            </div>
                        </div>
                        
                        <div className="meeting-content">
                            <div className="meeting-content-wrap is-active" id="item01">
                                {
                                    meeting_list.map((item, id) => 

                                    <div className="meeting-item" key={id}>
                                        <div className="user-wrap user-sm">
                                            <a href="/c-account/meeting/detail/1">
                                                <div className="user-avatar">
                                                    <img alt="name" className="avatar-img" src={item.image}/>
                                                </div>
                                                <p className="user-name">{item.first_name}  {item.last_name}</p>
                                            </a>
                                        </div>
                                        <a href="/c-account/meeting/detail/1" className="meeting-link">
                                            <h3 className="meeting-ttl">{item.title}</h3>
                                            <p className="meeting-txt">{item.text}</p>
                                        </a>  
                                        <div className="user-date">
                                            <time dateTime="2021-07-30" className="user-updated-time">
                                                <span className="user-updated">最終更新日：<span className="date">{item.meeting_approval.updated_at}</span></span>
                                            </time>
                                            <time dateTime="2021-07-30" className="user-awareness-time">
                                                <span className="user-awareness">承知日：<span className="date">{item.meeting_approval.approve_at}</span></span>
                                            </time>
                                        </div>
                                    </div>
                                
                                    )
                                } 
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </>
        
    )
}



export default Meeting;