import axios from 'axios';
import {View} from 'react-native';
import IconVector from 'react-native-vector-icons/FontAwesome5';
import { useToast } from "react-native-toast-notifications";
import * as Clipboard from 'expo-clipboard'; 
import { Avatar, Card, Text } from 'react-native-paper';
import { store } from '../../redux/store';
import { Button } from 'react-native-paper';

export default function ClipElementLocal({content}:{content: string}){

  const toast = useToast();
  function onCopy() {
    Clipboard.setStringAsync(content)
      .then(()=>{
        toast.show('copied "'+content+'" into the clipboard');
      });
  }

  function sendToRemote() { 
    axios.put("https://notifysync.simailadjalim.fr/clipboard",{
      content:content,
      deviceName:"TestNative",
      token: store.getState().user.token
    },{
      headers: {'Content-Type': 'multipart/form-data'}}
    ).then((response,status)=>{
        toast.show('"'+content+'" was sent to the server');
    }).catch(response => {
      toast.show('error');
    })
  }
  return (
    <View
      style={{
        flex: 1,
        margin: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
      <Card style={{width:"100%"}} onPress={onCopy}>
        <Card.Title title={content} right={() => 
          <Button mode="contained" onPress={() => sendToRemote()} >
            <IconVector name="paper-plane" size={20} color="black"  />
          </Button>
          }
        />
        <Card.Content>
          <Text></Text>
        </Card.Content>
      </Card>
    </View>
  );
}