import React, {Component} from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ImageBackground,
  FlatList,
  ScrollView,
  Linking,
} from 'react-native';
import styles from './styles';
import {Card} from 'react-native-elements';
import Modal from 'react-native-modal';
import {SafeAreaView} from 'react-navigation';

const data = [
  {
    imageUrl: 'http://via.placeholder.com/160x160',
    title: 'something',
  },
  {
    imageUrl: 'http://via.placeholder.com/160x160',
    title: 'something two',
  },
  {
    imageUrl: 'http://via.placeholder.com/160x160',
    title: 'something three',
  },
  {
    imageUrl: 'http://via.placeholder.com/160x160',
    title: 'something four',
  },
  {
    imageUrl: 'http://via.placeholder.com/160x160',
    title: 'something five',
  },
  {
    imageUrl: 'http://via.placeholder.com/160x160',
    title: 'something six',
  },
];

export default class SellerProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: data,
      isModalVisible: false,
      textShare: true,
    };
  }
  toggleModal = () => {
    this.setState({isModalVisible: !this.state.isModalVisible});
  };
  componentHideAndShow = () => {
    this.setState(previousState => ({textShare: !previousState.textShare}));
  };
  render() {
    return (
      <View style={[styles.flex, styles.backgroundColor]}>
        <ScrollView nestedScrollEnabled={true}>
          <View style={[styles.flex_Row, styles.Header]}>
            <View style={styles.container_Icon}>
              <TouchableOpacity>
                <View style={styles.btn}>
                  <Image
                    source={require('../../assets/img/chevron-left.png')}
                    style={styles.Icon}
                  />
                </View>
              </TouchableOpacity>
            </View>
            <View style={styles.container_Icon2}>
              <TouchableOpacity onPress={this.toggleModal}>
                <View style={styles.btn}>
                  <Image
                    source={require('../../assets/img/share-21.png')}
                    style={styles.Icon}
                  />
                </View>
              </TouchableOpacity>
            </View>
          </View>

          <View style={styles.container}>
            <View style={styles.flex_Row}>
              <View style={styles.container_Logo}>
                <Image
                  source={{uri: 'http://via.placeholder.com/160x160'}}
                  style={styles.img_Logo}
                />
              </View>
              <ImageBackground
                source={require('../../assets/img/Rectangle111.png')}
                style={styles.imgBackRate}>
                <Text style={styles.text_Rate}>4.5</Text>
              </ImageBackground>
            </View>
            <Text style={styles.text_NamaRestaurant}>J.CO Donuts & Cofee</Text>
            <View style={styles.flex_Row}>
              <Image
                source={require('../../assets/img/map-pin.png')}
                style={styles.Icon2}
              />
              <View style={styles.flex_Column}>
                <Text style={styles.text_Jarak}>Jarak 5 KM</Text>
                <Text style={styles.text_alamatRestaurant}>
                  Paviliun Rental Arkadi, Surdirman, Jakarta Pusat
                </Text>
              </View>
            </View>
            <View style={styles.flex_Row}>
              <Image
                source={require('../../assets/img/info.png')}
                style={styles.Icon3}
              />
              <Text style={styles.text_waktu}>21 : 00 - 22 : 00</Text>
            </View>
            <View style={styles.container_Divider}>
              <View style={styles.divider} />
            </View>
            <Text style={styles.text_Daftar}>Daftar Menu</Text>

            <View>
              <FlatList
                data={this.state.data}
                vertical={true}
                bounces={false}
                style={{}}
                renderItem={({item: rowData}) => {
                  return (
                    <Card
                      title={null}
                      containerStyle={{
                        // position: 'absolute',
                        width: '87%',
                        height: 272,
                        marginLeft: '6.7%',
                        marginTop: 14,
                        marginBottom: 25,
                        padding: 0,
                        elevation: 5,
                        backgroundColor: '#FFFFFF',
                        borderColor: '#ddd',
                        borderRadius: 8,
                      }}>
                      <Image
                        source={{uri: 'http://via.placeholder.com/160x160'}}
                        style={{
                          // position: 'absolute',
                          width: '100%',
                          height: 144,
                          marginBottom: 17,
                          borderTopLeftRadius: 8,
                          borderTopRightRadius: 8,
                        }}
                      />
                      <ImageBackground
                        source={require('../../assets/img/Rectangle111.png')}
                        style={styles.imgBackRate2}>
                        <Text style={styles.text_Rate2}>4.5</Text>
                      </ImageBackground>
                      <View
                        style={{
                          flexDirection: 'column',
                        }}>
                        <View>
                          <Text style={styles.text_makananCard}>Karedok</Text>
                          <Text style={styles.text_pemilikMakanan}>
                            Bu Suharti - Kemang, Jakarta Selatan
                          </Text>
                          <Text style={styles.text_waktuAmbil}>
                            Waktu Pengambilan 21.00 - 22.00
                          </Text>
                        </View>
                        <View
                          style={{
                            flexDirection: 'row',
                            alignItems: 'center',
                          }}>
                          <Text style={styles.hargaSekarang}>8000</Text>
                          <Text style={styles.hargaAsli}>10000</Text>
                          <Text style={styles.diskon}>Diskon 50%</Text>
                        </View>
                      </View>
                    </Card>
                  );
                }}
                keyExtractor={(item, index) => index}
              />
            </View>
          </View>
          <Modal
            isVisible={this.state.isModalVisible}
            animationIn="fadeIn"
            animationOut="fadeOut"
            style={{justifyContent: 'flex-end', margin: 0}}
            animationInTiming={500}
            animationOutTiming={500}>
            <View style={styles.popup}>
              <View style={[styles.flex_Row, styles.container_text]}>
                {this.state.textShare == false ? (
                  <View style={{width: '87%'}}>
                    <Text
                      onPress={this.componentHideAndShow}
                      style={styles.txt_share}>
                      Ada makanan berlebih dengan diskon 50% di *nama restoran*
                      nih. Yuk selamatkan makanan tersebut dan jadilah food
                      waste hero di lingkunganmu{' '}
                      <Image
                        source={require('../../assets/img/smile-icon-free.png')}
                        style={styles.img_smile}
                      />
                    </Text>
                    <TouchableOpacity
                      onPress={() => {
                        Linking.openURL('https://www.surplus.id/');
                      }}>
                      <Text style={styles.txt_link}>www.surplus.id</Text>
                    </TouchableOpacity>
                  </View>
                ) : (
                  <View style={{width: '87%'}}>
                    <Text
                      numberOfLines={2}
                      onPress={this.componentHideAndShow}
                      style={styles.txt_share}>
                      Ada makanan berlebih dengan diskon 50% di *nama restoran*
                      nih. Yuk selamatkan makanan tersebut dan jadilah food
                      waste hero di lingkunganmu
                      <Image
                        source={require('../../assets/img/smile-icon-free.png')}
                        style={styles.img_smile}
                      />
                    </Text>
                  </View>
                )}
                <TouchableOpacity onPress={this.toggleModal}>
                  <Image
                    source={require('../../assets/img/close-circle.png')}
                    style={styles.close_img}
                  />
                </TouchableOpacity>
              </View>
              <View style={[styles.flex_Row, styles.container_img_sosmed]}>
                <TouchableOpacity>
                  <Image
                    source={require('../../assets/img/instagram.png')}
                    style={styles.img_Sosmed}
                  />
                </TouchableOpacity>
                <TouchableOpacity>
                  <Image
                    source={require('../../assets/img/facebook.png')}
                    style={styles.img_Sosmed}
                  />
                </TouchableOpacity>
                <TouchableOpacity>
                  <Image
                    source={require('../../assets/img/twitter.png')}
                    style={styles.img_Sosmed}
                  />
                </TouchableOpacity>
                <TouchableOpacity>
                  <Image
                    source={require('../../assets/img/whatsapp.png')}
                    style={styles.img_Sosmed}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </Modal>
        </ScrollView>
      </View>
    );
  }
}