import React from 'react';
import axios from 'axios';
import {ScrollView, View, Text, useWindowDimensions} from 'react-native';
import ClipList from './ClipList';
import {store} from '../../redux/store';
import {useToast} from 'react-native-toast-notifications';
import {Button} from 'react-native-paper';
import {ps} from '../../utils';
import {useDispatch} from 'react-redux';
import {remoteClipAddToList} from '../../redux/reducers';

export default function ClipViewRemote() {
  const [clips, setClips] = React.useState(
    store.getState().remoteClip.remoteClip,
  );
  const toast = useToast();
  const dispatch = useDispatch();

  const {height, width} = useWindowDimensions();

  async function getClips(dispatch) {
    axios
      .get(
        'http://notifysync.simailadjalim.fr/clipboard?token=' +
          store.getState().user.token,
      )
      .then((response, status) => {
        let remoteclips = Object.values(response['data']['clipboard']);
        setClips(remoteclips);
        dispatch(remoteClipAddToList(remoteclips));
        toast.show('fetched latest clips from remote');
      })
      .catch(response => {
        toast.show(response);
        toast.show('failed to fetch latest clips');
      });
  }

  function getSignOutBtn() {
    return (
      <Button mode="elevated" onPress={() => {}}>
        Sign out
      </Button>
    );
  }

  let title = 'Remote Clipboard';
  return (
    <View
      style={{
        width: '100%',
        height: '100%',
        flex: 1,
        margin: width > 600 ? ps(10) : 0,
      }}>
      <Button mode="elevated" onPress={() => dispatch(getClips)}>
        Refresh
      </Button>
      <ScrollView>
        <ClipList type="remote" clips={clips} />
      </ScrollView>
    </View>
  );
}