import * as React from 'react'
import { View} from 'react-native'
import {connect} from 'react-redux'
import {GiftedChat, Actions, InputToolbar, Send, IMessage} from '../Components/ChatScreen'
import {ColorScheme, colorScheme} from "../Themes/Colors";
import MaterialIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import * as Modal from 'react-native-modalbox';
import metrics from "../Themes/Metrics";
import SettingsListItem from "../Components/LaunchScreen/SettingsTab/SettingsListItem";
import {Card} from "native-base";


interface ChatScreenProps {
  navigation?:any,
  colorScheme?:ColorScheme
}

interface ChatScreenState {
  messages?:IMessage[]
}

interface ChatScreen {
  modal?:any,
}


class ChatScreen extends React.Component<ChatScreenProps,ChatScreenState> {

  constructor(props) {
    super(props);
    this.state = {
      messages: [
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
          },
        },
      ],
    }
  }

  componentDidMount() {
  }

  onSend(messages = []) {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }))
  }

  render() {
    const ColorScheme = this.props.colorScheme;
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: ColorScheme.containersBackground
        }}
      >
        <Modal
          swipeToClose = {true}
          backButtonClose={true}
          position={'bottom'}
          style={{height:310,backgroundColor:'transparent'}}
          ref={(modal)=>this.modal = modal}>
          <Card style={{
            alignSelf: 'center',
            alignItems: 'flex-end',
            justifyContent: 'flex-end',
            width: metrics.screenWidth - 32,
            backgroundColor:ColorScheme.cardBackground

          }}>
            <SettingsListItem colorScheme ={ColorScheme} icon={'reply'} name={'پاسخ دادن'}/>
            <SettingsListItem colorScheme ={ColorScheme} icon={'forward'} name={'ارسال'}/>
            <SettingsListItem colorScheme ={ColorScheme} icon={'content-copy'} name={'کپی کردن متن'}/>
            <SettingsListItem colorScheme ={ColorScheme} icon={'select'} name={'انتخاب'}/>

          </Card>
        </Modal>

        <GiftedChat
          messages={this.state.messages}
          onSend={messages => this.onSend(messages)}
          user={{
            _id: 1,
          }}
          locale={'IR'}
          onLongPress={()=>this.modal.open()}
          //renderActions={() => this.renderActions()}
          renderInputToolbar={this.renderInputToolbar}
          renderSend={this.renderSend}
        />
      </View>
    )
  }

  renderInputToolbar = (props) => {
    //Add the extra styles via containerStyle
    return <InputToolbar {...props} />
  }

  renderSend = (props) => {
    return (<Send {...props} >
      <MaterialIcons
        style ={{margin:8}}
        name={'send'}
        size={28}
        color={ colorScheme(false).fullToneText}
      />
    </Send>)
  }

  renderActions = () => {
    // if (Platform.OS === 'ios') {
    //   return (
    //     <CustomActions
    //       {...props}
    //     />
    //   );
    // }
    const options = {
      'Action 1': (/**props*/) => {
        alert('option 1');
      },
      'Action 2': (/**props*/) => {
        alert('option 2');
      },
      'Cancel': () => {
      },
    };
    return (
      <Actions
        {...this.props}
        options={options}
      />
    );
  }
};

const mapStateToProps = (state) => {
  return {
    //  isDarkMode: state.isDarkMode.isDarkMode
    colorScheme: state.appSettings.colorScheme
  }
};

// const mapDispatchToProps = (dispatch) => {
//   return {}
// };

export default connect(mapStateToProps,/** mapDispatchToProps*/ null)(ChatScreen)