const dragAndDropDiv = editor.container;

dragAndDropDiv.addEventListener('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
});
dragAndDropDiv.addEventListener("drop",function(e){
    // Prevent default behavior (Prevent file from being opened)
    e.stopPropagation();
    e.preventDefault();
    const files = e.dataTransfer.items; // Array of all files

    console.assert(files.length >= 1);

    if (files[0].kind === 'file') {
        var file = e.dataTransfer.items[0].getAsFile();
        const fileSize = file.size;
        const fileName = file.name;
        const fileMimeType = file.type;

        reader = new FileReader();

        reader.onloadend = function(){
            editor.setValue(reader.result);
        }

        reader.readAsText(file);
    }else{
        //Maybe handle if text is dropped
        console.log(files[0].kind);
    }
});

const ResponsiveCardImg = styled(Card.Img)`
    // For screens wider than 768px
    @media(min-width: 768px) {
        // Your responsive styles here.
    }

    // For screens smaller than 768px
    @media(max-width: 768px) {
        // Your responsive styles here.
    }
`

export default function App() {
    return (
        <MainContainer>
            <Container>
                <Card text='white' bg='dark' style={styles.mainCard}>
                <ResponsiveCardImg
                    style={styles.cardImage}
                    onClick={handleClick}
                    src={apeImage}
                    alt='Degenerate Ape Academy'
                />
                <Card.Body>
                    <Card.Title className='text-center' as='h2'>
                    {apeId}
                    </Card.Title>
                </Card.Body>
                </Card>
            </Container>
        </MainContainer>
    );
}

const getURLParameters = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
    ),
    {}
);

const flat = arr => [].concat.apply([], arr.map(a => Array.isArray(a) ? flat(a) : a));
// Or
const flat = arr => arr.reduce((a, b) => Array.isArray(b) ? [...a, ...flat(b)] : [...a, b], []);

// Or
// See the browser compatibility at https://caniuse.com/#feat=array-flat
const flat = arr => arr.flat();

// Example
flat(['cat', ['lion', 'tiger']]);   // ['cat', 'lion', 'tiger']

const getSearchTerm = delimiter => {
	let searchTerm = "";

	for (let i = 1; i < commands.length - 1; i++)
	searchTerm = searchTerm + commands[i] + delimiter;

	searchTerm += commands[commands.length - 1];

	return searchTerm;
	};

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0
      ? document.getSelection().getRangeAt(0)
      : false;
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};

copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.