//@ts-nocheck
import React, { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
import MButton from './MButton';
import { commonStyles } from '../screens/CommonStyles';
import { color } from '../theme';
import { IconBack } from '../assets/icons';
import { MText } from './MText';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export default function MSelect(props) {
  const insets = useSafeAreaInsets();
  const navigation = useNavigation();
  const [data, setData] = useState(
    props?.route?.params?.data ? props?.route?.params?.data : []
  );

  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <View style={{ flex: 1, marginTop: insets.top }}>
        <View
          style={[
            commonStyles.alignCenter,
            { alignItems: 'center', marginTop: 16 },
          ]}
        >
          <MButton
            //@ts-ignore
            onPress={() => navigation.goBack()}
            style={[{ position: 'absolute', left: 16 }]}
          >
            <IconBack fill={color.textHeader} />
          </MButton>
          <MText
            style={[
              commonStyles.textNormalBold,
              { color: color.textHeader, fontSize: 16 },
            ]}
          >
            {props?.route.params.title}
          </MText>
        </View>
        <View
          style={{ backgroundColor: '#F2F3F5', height: 1, marginTop: 16 }}
        />
        <ScrollView style={{ flex: 1 }}>
          {data?.map((item: any, index: number) => (
            <>
              <TouchableOpacity
                key={index}
                style={{
                  padding: 16,
                  backgroundColor: '#FFFFFF',
                }}
                onPress={() => {
                  if (props?.route?.params?.callback) {
                    props?.route?.params?.callback(item);
                    navigation.goBack();
                  } else {
                    navigation.goBack();
                  }
                }}
              >
                <MText
                  style={[
                    { fontSize: 16, fontWeight: '500', color: '#333333' },
                  ]}
                >
                  {item?.name}
                </MText>
              </TouchableOpacity>
              <View style={{ backgroundColor: '#F2F3F5', height: 1 }} />
            </>
          ))}
        </ScrollView>
      </View>
    </View>
  );
}
