/** @jsx jsx */
import { AppBar, Button, Card, CardContent, Container, Input, Link, Tab, Tabs, Typography } from "@material-ui/core";
import * as R from "ramda";
import { useState } from "react";
import { Box, Flex, jsx } from "theme-ui";
import Dropzone from "../src/components/Dropzone";
import { TabPanel } from "../src/components/TabPanel";

const Index = () => {
  const [value, setValue] = useState(1)
  const [linkfileUrl, setInput] = useState("")

  const handleChange = (event, newValue) => {
    setValue(newValue)
  }

  const directView = () => {
    const removeHead = R.compose(R.tail, R.split("sia://"))
    const hash = removeHead(linkfileUrl)[0]
    if (window) {
      var win = window.open(`/${hash}`, "_blank")
      win.focus()
    }
  }
  return (
    <>
      <Box color="white">
        <Container>
          <Flex sx={{ alignItems: "center", height: 120 }}>
            <Box>
              <Typography sx={{ fontWeight: 700 }}>
                <Link href="/">
                  Sia Skynet
                </Link>
              </Typography>
            </Box>
            <Box sx={{ ml: "auto" }}>
              <Button href="/stats">
                Statistics
              </Button>
              <Button href="https://sia.tech/" target="_blank">
                About Sia
              </Button>
            </Box>
          </Flex>
        </Container>
      </Box>
      <Box>
        <Container>
          <AppBar position="static">
            <Tabs
              value={value}
              onChange={handleChange}
              aria-label="simple tabs example"
            >
              <Tab label="Upload" />
              <Tab label="Download" />
            </Tabs>
          </AppBar>
        </Container>
      </Box>
      <Container>
        <TabPanel value={value} index={0}>
          <Card sx={{ width: "100%" }}>
            <CardContent>
              <Dropzone />
            </CardContent>
          </Card>
        </TabPanel>
      </Container>
      <Container>
        <TabPanel value={value} index={1}>
          <Card sx={{ width: "100%" }}>
            <CardContent>
              <Flex
                sx={{
                  height: 400,
                  justifyContent: "center",
                  alignItems: "center",
                  flexDirection: "column"
                }}
              >
                <p>Download a file by pasting in a Sia linkfile below:</p>
                <Box sx={{ width: "60%" }}>
                  <Input
                    placeholder="sia://"
                    value={linkfileUrl}
                    onChange={e => setInput(e.target.value)}
                    sx={{ width: "100%" }}
                  />
                </Box>
                <Box sx={{ mt: 3 }}>
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={directView}
                  >
                    Download
                  </Button>
                </Box>
              </Flex>
            </CardContent>
          </Card>
        </TabPanel>
      </Container>
    </>
  )
}

export default Index