import React, { Component } from 'react';
import { StyleSheet, View, Text, ImageBackground, TouchableWithoutFeedback, TouchableOpacity } from 'react-native';
import { Toast } from 'native-base';
import { FlatGrid } from 'react-native-super-grid';
import CustomIcon from '../components/CustomIcon.js';
import axios from 'axios';
import NavigationService from '../components/NavigationService.js';
import Loading from '../components/Loading.js';
import I18n from '../locales';
import SQLite from 'react-native-sqlite-2';
import RF from 'react-native-responsive-fontsize';
const db = SQLite.openDatabase('favourite.db', '1.0', '', 1);

export default class PageImageView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            error: '',
            items: [],
            items_db: []
        }
        this.reRenderSomething = this.props.nav.addListener('willFocus', () => {
            this.componentDidMount();
        });
    }

    addToFavourites = (item_id, title, image, desc_html, url, expanded, normal_price, type) => {
        db.transaction(function (txn) {
            txn.executeSql('CREATE TABLE IF NOT EXISTS Favourite(id INTEGER PRIMARY KEY NOT NULL, item_id INTEGER, title VARCHAR(225), image VARCHAR(225), desc_html LONGTEXT, url VARCHAR(225), expanded VARCHAR(10), normal_price VARCHAR(100), type VARCHAR(100))', []);
            txn.executeSql('SELECT * FROM `favourite` WHERE item_id = ? and type = ?', [item_id, type], (tx, res) => {
                if (res.rows.length > 0) {
                    txn.executeSql('DELETE FROM `favourite` WHERE item_id = ? and type = ?', [item_id, type]);
                } else {
                    txn.executeSql('INSERT INTO Favourite (item_id, title, image, desc_html, url, expanded, normal_price, type) VALUES (:item_id, :title, :image, :desc_html, :url, :expanded, :normal_price, :type)', [item_id, title, image, desc_html, url, expanded, normal_price, type]);
                }
            });

        });
        this.selectFromTable(type).then((result) => {
            this.setState({ items_db: result });
        })
    }

    showErrorToast = () => {
        this.setState({ isLoading: false });
        Toast.show({
            text: I18n.t('internetErrorText'),
            type: "danger",
            duration: 3000,
            position: "top"
        });
    }

    async componentDidMount() {
        this.getItems(this.props.url);
        this.selectFromTable(this.props.page_type).then((result) => {
            this.setState({ items_db: result });
        })
    }

    selectFromTable = (page_type) => {
        return new Promise(function (resolve, reject) {
            db.transaction((txn) => {
                txn.executeSql('SELECT * FROM `favourite` WHERE type = ?', [page_type], (tx, res) => {
                    let itemsArray = [];
                    for (let i = 0; i < res.rows.length; ++i) {
                        itemsArray.push(res.rows.item(i).item_id)
                    }
                    resolve(itemsArray);
                });
            });
        });
    }

    getItems = (url_path) => {
        this.setState({ isLoading: true });
        axios.create({ headers: { 'from-app': '1' } }).get(url_path + '?view=list')
            .then(result =>
                this.setState({
                    items: result.data.page,
                    isLoading: false
                })
            )
            .catch(error => this.showErrorToast());
    }

    _renderItem = ({ item }) => {
        let heart_color = this.state.items_db.includes(parseInt(item.id)) ? '#FF0014' : '#FFF';
        return (
            <TouchableOpacity onPress={() => NavigationService.navigate('PageDetail', { page_title: this.props.title, url: item.url, page_type: this.props.page_type, ltd: item.ltd, lng: item.lng })}>
                <ImageBackground style={styles.itemImage} imageStyle={{ borderRadius: 15 }} source={{ uri: item.image }} >
                    <View style={styles.gradientStyle}>
                        <TouchableWithoutFeedback onPress={() => this.addToFavourites(item.id, item.title, item.image, item.desc_html, item.url, false, item.normal_price, this.props.title)}>
                            <CustomIcon name='white_heart' size={20} style={[styles.heartStyle, { color: heart_color }]} />
                        </TouchableWithoutFeedback>
                        <Text style={styles.normalPriceText}>{I18n.t('normalPriceText')}: {item.normal_price}</Text>
                        <Text style={styles.discountPriceText}>{I18n.t('discountPriceText')}: {item.price_discount}</Text>
                    </View>
                </ImageBackground>
            </TouchableOpacity>
        );
    }

    render() {
        const { isLoading, items } = this.state;
        if (isLoading || items.length === 0) {
            return (<Loading />);
        }
        return (
            <View style={styles.viewStyle}>
                <FlatGrid
                    itemDimension={130}
                    items={items.blocks}
                    renderItem={this._renderItem}
                />
            </View>
        );
    }

}

const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        paddingLeft: 25,
        paddingRight: 25,
        paddingBottom: 30,
        paddingTop: 10,
        backgroundColor: '#F5F7F6'
    },
    itemImage: {
        borderRadius: 15,
        width: null,
        height: 120,
        marginTop: 15
    },
    gradientStyle: {
        backgroundColor: 'rgba(0,0,0,.3)',
        borderRadius: 15,
        height: 120,
        width: null
    },
    heartStyle: {
        position: 'absolute',
        top: 0,
        right: 0,
        paddingTop: 10,
        paddingRight: 10,
        justifyContent: 'flex-end',
        alignItems: 'flex-end'
    },
    normalPriceText: {
        textAlign: 'left',
        position: 'absolute',
        backgroundColor: 'transparent',
        color: '#fff',
        left: 0,
        bottom: 0,
        paddingLeft: 10,
        paddingBottom: 20,
        fontSize: RF(1.6),
        justifyContent: 'flex-end',
        alignItems: 'flex-end'
    },
    discountPriceText: {
        textAlign: 'left',
        position: 'absolute',
        backgroundColor: 'transparent',
        color: '#fff',
        left: 0,
        bottom: 0,
        paddingLeft: 10,
        paddingBottom: 5,
        fontSize: RF(1.6),
        justifyContent: 'flex-end',
        alignItems: 'flex-end'
    }
});