/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React from 'react';
import { Modal, Text, View, Alert } from 'react-native';
import {
  Right,
  Icon,
  ListItem,
  Form,
  Item,
  Input,
  Label,
  Button,
  Left,
  Radio,
  Header,
  Body,
  Footer,
  FooterTab,
} from 'native-base';
import jsonData from '../../Database/grocery/data';
import styles from './styles';

interface ModalComponentProps {
  modalVisible: any;
  setModalInVisible: () => any;
  gotoSelectRadio: (index: number) => void;
  selectedIndex: number;
}

const ModalComponent = (props: ModalComponentProps) => {
  const { modalVisible, setModalInVisible, selectedIndex } = props;
  const closeCircle = 'arrow-back';
  const themeColor = '#f53d3d';
  const icontype = 'Ionicons';
  const header = 'Nickname of your address';
  return (
    <Modal
      animationType="slide"
      transparent={false}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
      }}
    >
      <Header style={styles.modalHeader}>
        <Left>
          <Button
            transparent
            onPress={setModalInVisible}
            style={styles.leftAlign}
          >
            <Icon name={closeCircle} style={styles.cancelIcon} />
          </Button>
        </Left>
        <Body />
        <Right />
      </Header>
      <View style={styles.contentViewModal}>
        <View style={styles.rowItem}>
          {jsonData.gender.map((type, index) => {
            return (
              <ListItem
                thumbnail
                onPress={() => props.gotoSelectRadio(index)}
                key={index}
              >
                <Left>
                  <View style={styles.rowCenterItem}>
                    <Radio
                      selected={selectedIndex === index}
                      selectedColor={themeColor}
                    />
                    <Text style={styles.leftPadd}>{type.name}</Text>
                  </View>
                </Left>
              </ListItem>
            );
          })}
        </View>
        <View>
          <Form style={{ marginTop: 16 }}>
            {jsonData.formDataAddAddress.map((inputs, index) => {
              return (
                <Item floatingLabel key={index}>
                  <Label>{inputs.label}</Label>
                  <Input />
                </Item>
              );
            })}
          </Form>
        </View>

        <ListItem itemHeader first style={styles.nopaddBottom}>
          <Text>{header}</Text>
        </ListItem>
        <ListItem style={styles.noborderBott}>
          <Button bordered style={styles.inlineButtons}>
            <Text style={styles.borderedButtonText}>HOME</Text>
          </Button>
          <Button bordered style={styles.inlineButtons}>
            <Text style={styles.borderedButtonText}>OFFICE</Text>
          </Button>
        </ListItem>
      </View>
      <Footer>
        <FooterTab>
          <Button
            full
            onPress={setModalInVisible}
            style={styles.closeModalFooterButt}
          >
            <Text style={styles.closeModalButtText}>CONTINUE</Text>
          </Button>
        </FooterTab>
      </Footer>
    </Modal>
  );
};

export default ModalComponent;
