import React, {useState, useEffect} from 'react';
import {StyleSheet} from  'react-native'; 
 
import C from 'rn-class'
import Accordion from 'react-native-collapsible/Accordion';
import moment  from 'moment';
import Net from '../provider/Net'   


export default (props)=>{
    let [activeSections , setActiveSections] = useState([])
    let [noticeData, setnoticeData] = useState([]);


    let getNotice = async()=>{
        let {result} = await Net.notice();
        setnoticeData(result);
    }
    
    useEffect(()=>{getNotice()},[])
    
    _renderHeader = (section, idx )=> {
        return (
        <C.View cls={`flx-row bgc-color-gray-light-v1 ma2 br3 pa2 ai-c ${activeSections[0] == idx ?  "mb0 br-bl0 br-br0" : ""}`}> 
            <C.Text cls="flx0.7 f1.8">{section.title}</C.Text> 

            <C.Text cls="flx0.2 f1.5 jc-c">{moment(section.createdAt).format("YYYY-MM-DD") }</C.Text>
  
            <C.View cls="flx0.1"> 
                <C.EL.Icon name={activeSections[0] == idx ? "caretup":"caretdown"} type="antdesign"  />
            </C.View>
        </C.View>
        );
    };


    _renderContent = section => {
        return (
        <C.View cls="bbw0.3 blw0.3 brw0.3 pv2 ph3  mh2 bc-color-gray-light-v1 br-bl3 br-br3 mt-1.5">
            <C.Text>{section.content}</C.Text>
        </C.View>
        );
    };

    return (
        <C.View cls="flx1 bgc-color-white"> 
         <C.EL.Header 
                ccls="bgc-color-transparent" 
                leftComponent={<C.EL.Icon type="antdesign" name="close" onPress={()=>props.navigation.goBack()}/>}  
            >
            </C.EL.Header>
            <C.View cls="ai-c">
                        <C.Text cls="f6 fw-b">Notice</C.Text> 
            </C.View>
            <C.View cls="flx1">
                <Accordion  
                      sections={noticeData} 
                      underlayColor ={"#FFF"}
                      activeSections={activeSections}
                    //   renderSectionTitle={_renderSectionTitle}
                      renderHeader={_renderHeader}
                      renderContent={_renderContent}
                      onChange={sections =>{setActiveSections(sections)}}
                />
                
            </C.View>

        </C.View>
    )  


}
