import React from "react";
import { Platform } from "react-native";

import { Text, View } from "mazlo-ui";

import styles from "./styles";

type Props = {
  accept?: string;
  disabled?: boolean;
  onSelect: (file: File) => void;
};

const Upload = ({ accept, disabled, onSelect }: Props) => {
  if (Platform.OS !== "web") return <Text>File upload not supported</Text>; // TODO

  return (
    <View>
      <View style={styles.label}>
        <View style={styles.labelText}>
          <Text style={styles.text}>Drag &amp; drop file or </Text>
          <Text style={styles.strongText}>browse</Text>
        </View>
      </View>
      <input
        type="file"
        accept={accept}
        disabled={disabled}
        style={{
          bottom: 0,
          opacity: 0,
          position: "absolute",
          width: "100%",
          top: 0,
        }}
        onChange={(e) => {
          const file = e.target.files[0];
          e.target.value = null;
          if (file) onSelect(file);
        }}
      />
    </View>
  );
};

export default Upload;