import React, {useState, ReactNode} from 'react';
import {View, Text, StyleSheet, ViewStyle, Image} from 'react-native';
import {$Theme, $Colors} from './style';

export type EmptyProps = {
    title?: string;
    source?: string;
    desc?: string;
    loading?: boolean;
    loadingText?: string;
    style?: ViewStyle;
    top?: ReactNode;
    bottom?: ReactNode;
};

const Empty: React.FC<EmptyProps> = ({title, loading, loadingText = '加载中...', desc = '抱歉没有符合您筛选条件的餐厅', source, style, top, bottom}) => {
    // TODO: change to SVG
    return (
        <View style={[styles.wrapper, style]}>
            <Image source={source ? source : require('../assets/images/defaults/empty.png')} style={styles.img} />
            {top ? top : title ? <Text style={styles.title}>{title}</Text> : null}
            <Text style={styles.desc}>{loading ? loadingText : desc}</Text>
            {bottom}
        </View>
    );
};
export default Empty;

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        ...$Theme.flexCol,
        height: '100%',
        marginTop: 100,
    },
    img: {
        width: 136,
        height: 136,
    },
    desc: {
        fontSize: 14,
        color: $Colors.lightText,
    },
    title: {
        fontSize: 16,
        color: $Colors.normalText,
        lineHeight: 22,
        marginTop: 14,
        marginBottom: 8,
    },
});