import * as React from 'react';
import {  ModalComponent, Button, RootWapperComponent } from '~/framework/components'
import { use<%= classify(name) %>Store } from './<%= dasherize(name) %>.component.store';
import { I<%= classify(name) %>Props, ACTION_TYPE } from './<%= dasherize(name) %>.interface'
import styles from './<%= dasherize(name) %>.component.style'
import { View,Text } from 'react-native';
export default function <%= classify(name) %>Component(props: I<%= classify(name) %>Props) {
  
  const { state, toastRef, handleActionModal } = use<%= classify(name) %>Store();
  const { modalVisible } = state

  return <RootWapperComponent
    toast
    toastConfig={{ ref: toastRef}}
  >
    <View>
      <Text style={styles.textStyle}>HOME</Text>
    </View>
      <Button 
      title={'TOAST'}
      onPress={() =>  handleActionModal(true, ACTION_TYPE.TOAST)} 
      buttonConfig={{
        color: 'red',
      }}
    />
  <Button 
      title={'MODAL'}
      onPress={() =>  handleActionModal(true, ACTION_TYPE.MODAL)} 
      buttonConfig={{
        color: 'red',
      }}
    />
    
    <ModalComponent
      visible={modalVisible}
      title={'测试MODAL'}
      content={<Text>本次活动报名时间</Text>}
      buttonConfig={
        {
          onCancle: () => handleActionModal(false, ACTION_TYPE.MODAL),
          onOk: () => handleActionModal(false, ACTION_TYPE.MODAL),
          title_ok: 'on',
          title_cancle: 'cancle'
        }
      }
    />
  </RootWapperComponent>
}