import React from 'react'
import PYSheet from '../../Common/alert/PYSheet'
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native'
import {isFunction} from '../../Common/tool/TypeTool'

type PropsType = {
    data: Array<string>
    onSelectItem: (str: string) => void
}

export default class BirthdaySortSheet extends React.Component<PropsType> {
    sheetRef: PYSheet | null = null
    render() {
        return (
            <PYSheet
                ref={e => (this.sheetRef = e)}
                customView={this._renderCustomView()}
                viewHeight={this._viewHeight()}
            />
        )
    }

    _renderCustomView = () => {
        const items: Array<React.ReactNode> = []
        const data = this.props.data || []
        for (let i = 0; i < data.length; i++) {
            const str = data[i]
            const item = this._renderItem(str, i)
            items.push(item)
        }
        return (
            <View style={[styles.container, {height: this._viewHeight()}]}>
                {items}
                {this._renderCancelBtn()}
            </View>
        )
    }

    _renderItem = (str: string, i: number) => {
        const radius = i === 0 ? 8 : 0
        return (
            <TouchableOpacity
                key={i}
                style={[styles.item, {borderTopLeftRadius: radius, borderTopRightRadius: radius}]}
                activeOpacity={0.8}
                onPress={this._onPressItem.bind(this, str)}>
                <Text style={styles.itemTitle}>{str}</Text>
                <View style={styles.itemLine} />
            </TouchableOpacity>
        )
    }

    _onPressItem = (str: string) => {
        this.sheetRef?.hide()
        isFunction(this.props.onSelectItem) && this.props.onSelectItem(str)
    }

    _renderCancelBtn = () => {
        return (
            <TouchableOpacity
                key={'cancel'}
                style={styles.cancelBtn}
                activeOpacity={0.8}
                onPress={this._onPressCancel.bind(this)}>
                <Text style={styles.cancelBtnTitle}>{'取消'}</Text>
            </TouchableOpacity>
        )
    }

    _onPressCancel = () => {
        this.sheetRef?.hide()
    }

    _viewHeight = () => {
        const data = this.props.data
        const viewHeight = data.length * 55 + 65 + 8
        return viewHeight
    }

    show = () => {
        this.sheetRef?.show()
    }
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        borderTopRightRadius: 8,
        borderTopLeftRadius: 8,
        paddingTop: 8,
    },
    item: {
        width: '100%',
        height: 55,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    itemTitle: {
        fontSize: 17,
        color: '#191919',
    },
    itemLine: {
        position: 'absolute',
        width: '100%',
        height: 1,
        backgroundColor: '#eeeeee',
        bottom: 0,
    },
    cancelBtn: {
        width: '100%',
        height: 55,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        marginTop: 10,
    },
    cancelBtnTitle: {
        fontSize: 17,
        color: 'rgb(0,115,249)',
    },
})