import { View, Sheet, YStack } from 'tamagui';
import { StyleSheet } from 'react-native';
import { useState } from 'react';
import { useSafeAreaInsets } from "react-native-safe-area-context";

// UI组件
import CustomButton from '@/components/ui/CustomButton';

// 引入hooks
import { useFilePicker } from '@/hooks/useFilePicker';

// 引入国际化
import { useTranslation } from 'react-i18next';
// 引入屏幕适配
import { wp, sp } from '@/utils/ui/screenUtils';

const CustomUploader = (props) => {
    // 国际化
    const { t } = useTranslation('common');
    // 获取安全区
    const insets = useSafeAreaInsets();
    // 打开ActionSheet
    const [openActionSheet, setOpenActionSheet] = useState(false);

    // 使用拍照和从手机相册选择
    const { openAlbum, openSystemCamera } = useFilePicker(props.uploadOptions);

    // 是否正在上传
    const [isUploading, setIsUploading] = useState(false);

    return (
        <View>
            <CustomButton
                loading={isUploading}
                onPress={() => { setOpenActionSheet(true) }}
                style={props.uploadPhotoButtonStyle}
                textStyle={[props.uploadBtnTextStyle, styles.defaultUploadBtnTextStyle]}
                btnText={props.uploadBtnText || t('buttons.upload')}
            />
            <Sheet
                forceRemoveScrollEnabled={openActionSheet}
                open={openActionSheet}
                onOpenChange={setOpenActionSheet}
                modal={true}
                snapPointsMode="fit"
                disableDrag={true}

            >
                <Sheet.Overlay
                    animation="lazy"
                    backgroundColor="$shadow6"
                    enterStyle={{ opacity: 0 }}
                    exitStyle={{ opacity: 0 }}
                />
                <Sheet.Frame>
                    <YStack>
                        <YStack>
                            <CustomButton
                                theme={undefined}
                                style={styles.actionSheetButton}
                                fontSize={sp(16)}
                                borderRadius={0}
                                pressStyle={{
                                    borderWidth: 0,
                                    borderColor: 'transparent',
                                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
                                }}
                                onPress={async () => {
                                    // 关闭弹窗
                                    setOpenActionSheet(false);
                                    setIsUploading(true);
                                    try {
                                        const res = await openSystemCamera(props.mediaTypes, () => setIsUploading(false));
                                        if (res) {
                                            props.onUploadResult && props.onUploadResult(res);
                                        }
                                    } catch (err) {
                                        props.onUploadResult && props.onUploadResult(err);
                                    }
                                }}
                                btnText={t('buttons.takePhoto')}
                            />
                            <View style={{ height: wp(1), backgroundColor: 'rgb(242, 242, 242)' }} ></View>
                            <CustomButton
                                theme={undefined}
                                style={styles.actionSheetButton}
                                fontSize={sp(16)}
                                borderRadius={0}
                                pressStyle={{
                                    borderWidth: 0,
                                    borderColor: 'transparent',
                                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
                                }}
                                onPress={async () => {
                                    // 关闭弹窗
                                    setOpenActionSheet(false);
                                    setIsUploading(true);
                                    try {
                                        const res = await openAlbum(props.mediaTypes, props.selectionLimit, () => setIsUploading(false));
                                        if (res) {
                                            props.onUploadResult && props.onUploadResult(res);
                                        }
                                    } catch (err) {
                                        props.onUploadResult && props.onUploadResult(err);
                                    }
                                }}
                                btnText={t('buttons.chooseFromAlbum')}
                            />
                        </YStack>
                        <YStack>
                            <View style={{ height: wp(5), backgroundColor: 'rgb(242, 242, 242)' }} ></View>
                            <CustomButton
                                theme={undefined}
                                style={styles.actionSheetCancelButton}
                                height={wp(50) + (insets.bottom || wp(16))}
                                paddingBottom={insets.bottom || wp(16)}
                                borderRadius={0}
                                fontSize={sp(16)}
                                pressStyle={{
                                    borderWidth: 0,
                                    borderColor: 'transparent',
                                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
                                }}
                                onPress={() => {
                                    setOpenActionSheet(false);
                                }}
                                btnText={t('buttons.cancel')}
                            />
                        </YStack>
                    </YStack>
                </Sheet.Frame>
            </Sheet>
        </View>
    )
}

export default CustomUploader;

const styles = StyleSheet.create({
    defaultUploadBtnTextStyle: {
        color: '#FFFFFF',
    },
    actionSheetButton: {
        height: wp(50),
    },
    actionSheetCancelButton: {
        borderWidth: 0,
        borderColor: 'transparent',
    },
});