import React, { ReactNode } from 'react';

import {
    StyleProp,
    StyleSheet,
    TouchableOpacity,
    ViewStyle,
} from 'react-native';

import { SwipeListView } from 'react-native-swipe-list-view';
import SFBaseComponent from '../SFBaseComponent';
import SFButtonImage from '../SFButton/ButtonImage';
import SFContainer from '../SFContainer';
import SFImage from '../SFImage';
import SFLine from '../SFLine';
import SFText from '../SFText';
import ProductListItem from './ProductListItem';

interface SFSwipeListViewProductProps {
    style?: StyleProp<ViewStyle>;
    productDatas: ProductListItem[];
    onDeleteClick: (productListItem: ProductListItem) => void;
    onItemClick: (productListItem: ProductListItem) => void;
}
let openRowId: any = null;

export default class SFSwipeListViewProduct extends SFBaseComponent<SFSwipeListViewProductProps, {}> {

    getMarginBottomListItem = (length: number, position: number) => {
        if (position === (length - 1)) {
            return 84;
        }
        return 0;
    }

    openRow = (rowRef: any) => {
        rowRef.manuallySwipeRow(-60);
    }

    closeRow = (rowRef: any) => {
        rowRef.closeRow();
    }

    renderItem(rowData: any, rowMap: any): ReactNode {
        const _item: ProductListItem = rowData as ProductListItem;
        const index: number = this.props.productDatas.indexOf(_item);

        return (
            <SFContainer
                style={{
                    backgroundColor: 'white', flex: 1,
                    // tslint:disable-next-line:max-line-length
                    marginBottom: this.getMarginBottomListItem(this.props.productDatas.length, index),
                }}>
                <SFLine />
                <TouchableOpacity
                    onPress={() => this.props.onItemClick(_item)}>
                    <SFContainer
                        // tslint:disable-next-line:max-line-length
                        style={{
                            flex: 1, flexDirection: 'row',
                            height: 80,
                            justifyContent: 'space-between',
                            alignItems: 'center',
                        }}>

                        {_item.stock <= 0 && _item.isOrderUpdatingStock &&
                            <SFContainer>
                                <SFImage
                                    resizeMode={'cover'}
                                    style={{
                                        height: 64, width: 64, marginBottom: 8,
                                        marginTop: 8, marginLeft: 8, borderRadius: 8, marginRight: 12,
                                    }}
                                    // tslint:disable-next-line:max-line-length
                                    source={_item.image || require('../../assets/images/img_product_placeholder/img_product_placeholder.png')}
                                />

                                <SFContainer
                                    style={{
                                        position: 'absolute', height: 64, width: 64, borderRadius: 8, margin: 8,
                                        backgroundColor: 'rgba(255, 255, 255, 0.50)',
                                    }} />
                            </SFContainer>
                        }

                        {(_item.stock > 0 || (_item.stock <= 0 && !_item.isOrderUpdatingStock)) &&
                            <SFContainer>
                                {(_item.stock > _item.minStock || (_item.stock <= _item.minStock &&
                                    !_item.isOrderUpdatingStock)) &&
                                    <SFImage
                                        resizeMode={'cover'}
                                        style={{
                                            height: 64, width: 64, marginBottom: 8,
                                            marginTop: 8, marginLeft: 8, borderRadius: 8, marginRight: 12,
                                        }}
                                        // tslint:disable-next-line:max-line-length
                                        source={_item.image || require('../../assets/images/img_product_placeholder/img_product_placeholder.png')}
                                    />
                                }

                                {_item.stock <= _item.minStock && _item.isOrderUpdatingStock &&
                                    <SFContainer style={{ flexDirection: 'row', paddingBottom: 6 }}>
                                        <SFImage
                                            resizeMode={'cover'}
                                            style={{ height: 64, width: 64, margin: 8, borderRadius: 8 }}
                                            // tslint:disable-next-line:max-line-length
                                            source={_item.image || require('../../assets/images/img_product_placeholder/img_product_placeholder.png')}
                                        />

                                        <SFContainer style={{
                                            height: 24, width: 24,
                                            borderRadius: 16,
                                            backgroundColor: 'white',
                                            marginLeft: -20,
                                            marginBottom: -2,
                                            alignSelf: 'flex-end',
                                        }}>
                                            <SFImage
                                                style={{ height: 24, width: 24 }}
                                                // tslint:disable-next-line:max-line-length
                                                source={require('../../assets/images/message_ic_alert/message_ic_alert.png')}
                                            />
                                        </SFContainer>
                                    </SFContainer>
                                }
                            </SFContainer>
                        }

                        <SFContainer
                            style={{ flex: 1, marginLeft: 16 }}>
                            <SFText
                                text={_item.title!!.toString()}
                                style={s.title}
                            />

                            {_item.stock <= 0 && _item.isOrderUpdatingStock &&
                                <SFText
                                    style={[s.subtitle, { color: '#ea4161' }]}
                                    text={'Stok habis'}
                                />
                            }

                            {(_item.stock > 0 || (_item.stock <= 0 && !_item.isOrderUpdatingStock)) &&
                                <SFText
                                    text={_item.subtitle}
                                    style={s.subtitle}
                                />
                            }
                        </SFContainer>

                        <SFText
                            text={_item.subtxt}
                            style={[s.title, {
                                marginRight: 8,
                                fontWeight: 'bold',
                                textAlign: 'right',
                                color: '#333333',
                            }]}
                        />

                        <SFButtonImage style={{ margin: 24 }}
                            onClick={() => {
                                if (this.props.onDeleteClick)
                                    this.props.onDeleteClick(_item);
                            }}
                            source={require('../../assets/images/ic_delete_red/ic_delete_red.png')}
                        />
                    </SFContainer>
                </TouchableOpacity>
            </SFContainer>
        );
    }

    renderHiddenItem(rowData: any): ReactNode {
        const _item: ProductListItem = rowData as ProductListItem;
        const index: number = this.props.productDatas.indexOf(_item);

        return (
            <TouchableOpacity
                style={{
                    flex: 1, alignSelf: 'flex-end', height: 60, width: 60,
                    // tslint:disable-next-line:max-line-length
                    marginBottom: this.getMarginBottomListItem(this.props.productDatas.length, index),
                }}
                onPress={() => this.props.onDeleteClick(_item!!)}>
                <SFContainer
                    style={{
                        flex: 1, backgroundColor: '#ea4161',
                        width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center',
                    }}>
                    <SFImage
                        source={require('../../assets/images/ic_delete_white/ic_delete_white.png')}
                    />
                </SFContainer>
            </TouchableOpacity>
        );
    }

    doRender() {
        return (
            <SFContainer
                style={this.props.style}>
                <SwipeListView
                    disableRightSwipe
                    disableLeftSwipe
                    useFlatList={true}
                    data={this.props.productDatas}
                    renderItem={(rowData: any, rowMap: any) => (
                        this.renderItem(rowData.item, rowMap)
                    )}
                    renderHiddenItem={(rowData: any) => (
                        this.renderHiddenItem(rowData.item)
                    )}
                    rightOpenValue={-60}
                    onRowOpen={(rowKey: any, rowMap: any) => { openRowId = rowMap[rowKey]; }}
                    onRowClose={() => { openRowId = null; }}
                />
            </SFContainer>
        );
    }
}

const s = StyleSheet.create({
    title: {
        fontFamily: 'Nunito',
        fontSize: 14,
        fontStyle: 'normal',
        letterSpacing: 0,
        fontWeight: '600',
        color: '#333333',
        marginRight: 16,
    },
    subtitle: {
        fontFamily: 'Nunito',
        fontSize: 12,
        fontStyle: 'normal',
        letterSpacing: 0,
        color: '#999999',
        marginRight: 16,
    },
});