import React, { Fragment } from 'react';
import Styled from 'styled-components/native';
import Theme from '~/Themes';
import { Util } from '~/Utils/utils';

const EmptyContainer = Styled.View`
    flex: 1;
    flex-direction: column;
    height: 500px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
`;
const EmptyText = Styled.Text`
    font-size: 20px;
    font-family: ${Theme.Fonts.Bold};
    include-font-padding: false;
    opacity: 0.5;
`;

const ListEmptyView = Styled.View`
    width:88px;
    height:88px;
    background-color:#f5f5f5;
    border-radius:44px;
    overflow:hidden;
    justify-content:center;
    align-items:center;
    margin-bottom: 5;
`;
const ListLoadingView = Styled.View`
    width:88px;
    height:88px;
    background-color:#f5f5f5;
    border-radius:44px;
    overflow:hidden;
    justify-content:center;
    align-items:center;
`;
const ListEmptyIcon = Util.svg('/listing/empty');
const ListLoadingIcon = Util.svg('/listing/loading');

export default EmptyView = ({emptyTitle = "조회된 데이터가 없습니다.", loadingTitle = "데이터를 조회중입니다.", list = null, style={}}) => {
    return (
        <EmptyContainer style={style}>
            {list == null ? (
                <ListLoadingView><ListLoadingIcon width={33} height={33} /></ListLoadingView>
            ) : (
                <Fragment>
                    <ListEmptyView><ListEmptyIcon width={33} height={33} /></ListEmptyView>
                    <EmptyText>{emptyTitle}</EmptyText>
                </Fragment>
            )}
        </EmptyContainer>
    )
}