import React, { useCallback } from 'react';
import { View, Text, TouchableOpacity } from 'react-native'
import SvgUri from 'react-native-svg-uri';
import styles from './style';
import { color } from '../../constants';

const svg:string = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1592795349820" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="21678" width="150" height="150"><defs><style type="text/css"/></defs><path d="M955.5 705.8l-77.5-44c18.6-46.3 28.9-96.9 28.9-149.9 0-222-180-401.9-401.9-401.9-100.8 0-193 37.1-263.5 98.4l-50-28.4c-12.2-6.9-27.9-2.6-34.8 9.6-6.9 12.2-2.6 27.9 9.6 34.8l86.4 49c10.4 7.5 13.8 21.9 7.3 33.3-6.9 12.2-22.6 16.5-34.8 9.6l-53-30L93.7 242c-12.2-6.9-27.9-2.6-34.8 9.6-6.9 12.2-2.6 27.9 9.6 34.8l77.7 44.1C118.5 385 103 446.7 103 512c0 222 180 401.9 401.9 401.9 113.8 0 216.6-47.3 289.7-123.3l37.6 21.3c12.2 6.9 27.9 2.6 34.8-9.6 6.9-12.2 2.6-27.9-9.6-34.8l-88.3-50.1c-12.2-6.9-16.5-22.6-9.6-34.8 6.7-11.8 21.6-16.3 33.6-10.2l137.2 77.8c12.2 6.9 27.9 2.6 34.8-9.6 6.9-12.2 2.6-27.8-9.6-34.8z" fill="#ECF2FD" p-id="21679"/><path d="M617.2 677.1l-35 32.3-253.8-32.3c-6.3 0-11.5-5.5-11.5-12.3V322.3c0-6.8 5.2-12.3 11.5-12.3h288.8c6.3 0 11.5 5.5 11.5 12.3v342.5c-0.1 6.7-5.2 12.3-11.5 12.3z" fill="#96BBFF" p-id="21680"/><path d="M566.3 718.3h-260c-6.6 0-12-5.4-12-12V368.9c0-6.6 5.4-12 12-12h260c6.6 0 12 5.4 12 12v337.4c0 6.6-5.4 12-12 12z" fill="#C0D6FF" p-id="21681"/><path d="M729.7 597H412.2c-6.6 0-12-5.4-12-12V395.8c0-6.6 5.4-12 12-12h317.5c6.6 0 12 5.4 12 12V585c0 6.6-5.4 12-12 12z" fill="#FFFFFF" p-id="21682"/><path d="M683.9 466.6h-93c-10.6 0-19.2-7.2-19.2-16.2 0-8.9 8.6-16.2 19.2-16.2h93c10.6 0 19.2 7.2 19.2 16.2 0.1 9-8.6 16.2-19.2 16.2z m-35.1 61.7h-63.9c-7.3 0-13.2-7.2-13.2-16.2 0-8.9 5.9-16.2 13.2-16.2h63.9c7.3 0 13.2 7.2 13.2 16.2s-5.9 16.2-13.2 16.2zM499.9 413.8c12.7 0 22.7 2.8 29.9 8.5 7.2 5.7 10.9 13.8 10.9 24.3 0 4.9-1.5 9.5-4.4 13.8-2.9 4.2-7.4 8.8-13.5 13.8-3 2.3-5.9 4.8-8.8 7.3-1.8 1.6-3.4 3.4-4.8 5.4-1.1 1.6-1.8 3.2-2.1 4.7-0.3 1.7-0.5 3.5-0.5 5.3 0 6.6-3.4 9.9-10.3 9.9-2.7 0-4.8-0.2-6.3-0.4-1.3-0.2-2.5-0.8-3.5-1.6-0.9-0.8-1.4-1.9-1.6-3.1-0.3-1.6-0.4-3.1-0.4-4.7 0-10.5 6.6-21 19.8-31.5 2.5-1.9 5-3.9 7.4-6 1.9-1.6 3.4-3.1 4.5-4.5 1-1.3 1.7-2.7 2.1-4.2 0.3-1.4 0.5-3.1 0.5-5 0-4.6-1.7-8.2-5.1-10.7-3.4-2.5-8.2-3.7-14.3-3.7s-11 1.4-14.7 4.2c-3.7 2.8-5.7 6.3-5.9 10.3-0.4 6.1-4.1 9.1-11 9.1-7.4 0-11-2.9-11-8.8 0-8.4 4.1-16 12.2-22.6 7.9-6.6 18.2-9.8 30.9-9.8z m-5.1 102.1c2.2 0 4.4 0.4 6.4 1.3 3.9 1.8 7.1 4.9 8.9 8.9 0.9 2 1.3 4.2 1.3 6.4s-0.4 4.4-1.3 6.4c-1.8 3.9-4.9 7.1-8.9 8.9-2 0.9-4.2 1.3-6.4 1.3s-4.4-0.4-6.4-1.3c-3.9-1.8-7.1-4.9-8.8-8.9-0.9-2-1.4-4.2-1.3-6.4 0-2.3 0.4-4.4 1.3-6.4 1.8-3.9 4.9-7.1 8.8-8.9 2-0.9 4.2-1.3 6.4-1.3z" fill="#5591F2" p-id="21683"/><path d="M292.2 730.7V363.2c0-38.5 31.3-69.9 69.8-69.9h281v81.4h-24.7V318H362.1c-24.9 0-45.2 20.3-45.2 45.2V706h260.4l41-41v-70.5H643v80.7l-55.5 55.5H292.2z" fill="#5591F2" p-id="21684"/><path d="M540.2 667.8H361.3c-6.2 0-11.1-5.9-11.1-13.2 0-7.3 5-13.2 11.1-13.2h178.9c6.2 0 11.1 5.9 11.1 13.2 0 7.3-5 13.2-11.1 13.2z" fill="#FFFFFF" p-id="21685"/><path d="M864.9 335.3h-56.3c-4.5 0-8.2-3.7-8.2-8.2 0-4.5 3.7-8.2 8.2-8.2h56.3c4.5 0 8.2 3.7 8.2 8.2-0.1 4.6-3.7 8.2-8.2 8.2z" fill="#96BBFF" p-id="21686"/><path d="M836.7 364.3c-4.5 0-8.2-3.7-8.2-8.2v-56.3c0-4.5 3.7-8.2 8.2-8.2 4.5 0 8.2 3.7 8.2 8.2v56.3c0 4.6-3.7 8.2-8.2 8.2z m-760-10H49.9c-4.5 0-8.2-3.7-8.2-8.2 0-4.5 3.7-8.2 8.2-8.2h26.8c4.5 0 8.2 3.7 8.2 8.2 0 4.5-3.6 8.2-8.2 8.2z" fill="#96BBFF" p-id="21687"/><path d="M63.3 368.1c-4.5 0-8.2-3.7-8.2-8.2v-26.8c0-4.5 3.7-8.2 8.2-8.2 4.5 0 8.2 3.7 8.2 8.2v26.8c0 4.5-3.6 8.2-8.2 8.2zM779.9 807.5H753c-4.5 0-8.2-3.7-8.2-8.2 0-4.5 3.7-8.2 8.2-8.2h26.8c4.5 0 8.2 3.7 8.2 8.2 0 4.6-3.6 8.2-8.1 8.2z" fill="#96BBFF" p-id="21688"/><path d="M766.5 821.4c-4.5 0-8.2-3.7-8.2-8.2v-26.8c0-4.5 3.7-8.2 8.2-8.2 4.5 0 8.2 3.7 8.2 8.2v26.8c-0.1 4.5-3.7 8.2-8.2 8.2zM148.2 568.7h-26.8c-4.5 0-8.2-3.7-8.2-8.2 0-4.5 3.7-8.2 8.2-8.2h26.8c4.5 0 8.2 3.7 8.2 8.2 0 4.5-3.7 8.2-8.2 8.2z" fill="#96BBFF" p-id="21689"/><path d="M134.8 582.5c-4.5 0-8.2-3.7-8.2-8.2v-26.8c0-4.5 3.7-8.2 8.2-8.2 4.5 0 8.2 3.7 8.2 8.2v26.8c0 4.5-3.7 8.2-8.2 8.2zM293 185.8h-48.9c-4.5 0-8.2-3.7-8.2-8.2 0-4.5 3.7-8.2 8.2-8.2H293c4.5 0 8.2 3.7 8.2 8.2 0 4.5-3.7 8.2-8.2 8.2z" fill="#96BBFF" p-id="21690"/><path d="M268.5 211c-4.5 0-8.2-3.7-8.2-8.2v-48.9c0-4.5 3.7-8.2 8.2-8.2 4.5 0 8.2 3.7 8.2 8.2v48.9c0 4.5-3.6 8.2-8.2 8.2zM944.6 650.6h-48.9c-4.5 0-8.2-3.7-8.2-8.2 0-4.5 3.7-8.2 8.2-8.2h48.9c4.5 0 8.2 3.7 8.2 8.2 0 4.5-3.7 8.2-8.2 8.2z" fill="#96BBFF" p-id="21691"/><path d="M920.1 675.8c-4.5 0-8.2-3.7-8.2-8.2v-48.9c0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2v48.9c0 4.5-3.7 8.2-8.2 8.2z m0 0" fill="#96BBFF" p-id="21692"/><path d="M738.4 363.3H404c-11.8 0-21.4 9.6-21.4 21.4v199.8c0 11.8 9.6 21.3 21.4 21.3h334.4c11.8 0 21.4-9.6 21.4-21.3V384.7c0-11.8-9.6-21.4-21.4-21.4z m-4.7 216.5h-325V389.4h325v190.4z" fill="#5591F2" p-id="21693"/></svg>`

interface EmptyProps {
  text?:string;
  retryText?:string;
  onTextPress?():void;
  onlyText?: boolean
}

const Empty:React.FC<EmptyProps> = ({
  onlyText=false,
  retryText='',
  text='暂无数据',
  onTextPress
}:EmptyProps) => {
  const handleTextPress = useCallback(() => {
    if(!retryText) return;
    onTextPress && onTextPress()
  }, [onTextPress])
  return (
    <TouchableOpacity activeOpacity={!retryText ? 1 : 0.5} style={styles.centerContainer} onPress={handleTextPress}>
      <View>
        { onlyText ? null : <SvgUri svgXmlData={svg}/> }
        <View style={styles.textContainer}>
        <Text style={styles.emptyText}>{text}</Text>
          {
            !!retryText &&
            <Text style={{color: color.brandColor}}>{retryText}</Text>
          }
        </View>
      </View>
    </TouchableOpacity>
  )
}

export default Empty;