import React, { Component } from 'react';
import { Alert, Vibration, StatusBar, ScrollView } from 'react-native';
import { mapping, dark as darkTheme } from '@eva-design/eva';
import { ApplicationProvider, Layout, Button, Text, Input, ButtonProps, StyleType, List, ListItem, ListItemProps } from 'react-native-ui-kitten';
import Divider from 'react-native-divider';

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      holder: '',
      players: []
    }
  }

  AddPlayer=()=>{
    const players = this.state.players.slice()
    players.unshift(this.state.holder)
    this.setState({players})
    this.setState({holder : ''})
  }

render() {

  const Accessory = (style: StyleType): React.ReactElement<ButtonProps> => {
    return (
      <Button onPress={() => Alert.alert('A') } style={style} status='info' appearance='filled'>Ta bort</Button>
    );
  };

  return(
  <ApplicationProvider
    mapping={mapping}
    theme={darkTheme}>
    <Layout style={{ alignItems: 'center', padding: 30, paddingBottom: 0}}>
    <StatusBar barStyle="light-content" />

    <Input
      style={{marginTop: 40}}
      label='Spelarens namn'
      size='large'
      keyboardAppearance='dark'
      maxLength={18}
      returnKeyType='done'
      onChangeText={InputValue => this.setState({holder : InputValue})}
      value={this.state.holder}
    />

    <Button
    style={{marginTop: 15, marginBottom: 40}}
    status='primary'
    size='giant'
    appearance='filled'
    onPress={this.AddPlayer}
    >
    Lägg till spelare
    </Button>

      <Divider color='white'>Spelare:</Divider>
      </Layout>
      <Layout style={{ flex: 1, alignItems: 'stretch', padding: 30, paddingTop: 0 }}>
      <ScrollView showsVerticalScrollIndicator={false}>
      {
      this.state.players.map((l, i) => (
        <ListItem
          key={i}
          style={{marginTop: 8, backgroundColor: '#1a1f2d'}}
          title={l}
          description='Spelare'
          renderAccessory={() => <Accessory l={l} />}
        />
      ))
    }
    </ScrollView>
    </Layout>

  </ApplicationProvider>
)};

};