import React, { useState, useEffect } from "react";
import he from 'he';
import { useTranslation } from "react-i18next";
import { makeStyles, withStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import red from '@material-ui/core/colors/red';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import MenuOpenIcon from '@material-ui/icons/MenuOpen';
import Avatar from '@material-ui/core/Avatar';
import Collapse from '@material-ui/core/Collapse';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardMedia from '@material-ui/core/CardMedia';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
import SearchIcon from '@material-ui/icons/Search';
import Badge from '@material-ui/core/Badge';
import InputBase from '@material-ui/core/InputBase';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import Skeleton from '@material-ui/lab/Skeleton';
import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider';
import Chip from '@material-ui/core/Chip';
import Rating from '@material-ui/lab/Rating';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import StoreIcon from '@material-ui/icons/Store';
import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
import Grow from '@material-ui/core/Grow';
import LazyLoad from 'react-lazyload';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import { useWindowDimensions } from './utils.js';
import 'pure-react-carousel/dist/react-carousel.es.css';
import 'fontsource-roboto';

const StyledBadge = withStyles((theme) => ({
   badge: {
      right: -3,
      top: 13,
      border: `2px solid ${theme.palette.background.paper}`,
      padding: '0 4px',
   },
}))(Badge);

function StoreItemDetails(props) {
   const { t } = useTranslation();

   const classes = makeStyles((theme) => ({
   }))();

   return (
      <>
         <Typography variant="h6" gutterBottom>
            {props.data.title}
         </Typography>
         <Typography variant="body2" color="textSecondary" component="p">
            {props.data.desc}
         </Typography>
      </>
   );
}

function StoreItemSkeleton(props) {
   return (
      <Grow in={true}>
         <div className={props.className}>
            <div style={{display: 'flex', alignItems: 'center', height: 72, padding: 18}}>
               <Skeleton variant='circle' width={48} height={48} style={{marginRight: 18}}/>
               <div style={{width: '60%'}}>
                  <Skeleton width='100%'/>
                  <Skeleton width='100%'/>
               </div>
            </div>
            <Skeleton variant='rect' width='100%' height={180}/>
         </div>
      </Grow>
   );
}

function StoreItem(props) {
   const { t } = useTranslation();

   const classes = makeStyles((theme) => ({
      media: { height: 180,  position: 'relative' },
      cat: { position: 'absolute', bottom: 4, left: 4 },
      price: { position: 'absolute', bottom: 4, right: 4 },
      rating: {
         position: 'absolute', top: 4, right: 4,
         backgroundColor: 'rgba(0, 0, 0, 0.8)',
         padding: 4, borderRadius: 4,
      },
      content: { paddingLeft: 8 },
      text: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
      },
      avatar: { backgroundColor: red[500] }
   }))();

   return (
      <LazyLoad resize once placeholder={<StoreItemSkeleton className={props.className}/>}>
         <Grow in={true}>
            <Card className={props.className} variant="outlined">
               <CardActionArea>
                  <CardHeader
                     avatar={
                        <Avatar aria-label={props.data.author} className={classes.avatar}>
                        {props.data.author.substring(0, 2)}
                        </Avatar>
                     }
                     title={props.data.title}
                     titleTypographyProps={{className: classes.text}}
                     subheader={props.data.author}
                     subheaderTypographyProps={{className: classes.text}}
                  />
                  <CardMedia className={classes.media}
                     image={props.data.img}
                     title={props.data.title}
                  >
                     <Chip label={props.data.price} className={classes.price}/>
                     <Chip label={t(props.data.cat)} className={classes.cat}/>
                     <Rating name="size-small" size="small" className={classes.rating} readOnly defaultValue={props.data.rating} precision={0.5}/>
                  </CardMedia>
               </CardActionArea>
            </Card>
         </Grow>
      </LazyLoad>
   );
}

function StoreSeparator(props) {
   const { t } = useTranslation();

   const classes = makeStyles((theme) => ({
      root: { margin: 4 },
   }))();

   return (
      <div className={classes.root}>
         <Typography variant="h6">{t(props.title)}</Typography>
         <Divider variant="middle"/>
      </div>
   );
}

function StoreCarousel(props) {
   const { height, width } = useWindowDimensions();
   const cols = Math.floor(width / 240);
   const tw = (cols > 1 ? (cols * 240 > width - 18 ? 240 - 20 : 240) : '100%')

   const classes = makeStyles((theme) => ({
      root: { paddingLeft: cols > 1 ? 18 : 4, paddingRight: cols > 1 ? 18 : 4 },
      tile: { width: tw, marginRight: 'auto', marginLeft: 'auto' },
      controls: { position: 'relative' },
      prev: { position: 'absolute', left: cols > 1 ? -15 : -4, top: '50%', backgroundColor: 'rgba(0, 0, 0, 0.5)', color: 'white' },
      next: { position: 'absolute', right: cols > 1 ? -15 : -4, top: '50%', backgroundColor: 'rgba(0, 0, 0, 0.5)', color: 'white' },
   }))();

   var skeletons = [];
   for (var i = 0; props.loading && i < cols; i += 1) skeletons.push({});

   return (
      <div className={classes.root}>
         <StoreSeparator title={props.name}/>
         <CarouselProvider
            infinite
            isPlaying
            lockOnWindowScroll
            isIntrinsicHeight
            naturalSlideWidth={tw}
            naturalSlideHeight={tw}
            visibleSlides={cols}
            totalSlides={props.data.length + skeletons.length}>
            <div className={classes.controls}>
               <Slider>
                  {props.data.map((item, index) => <Slide index={index} key={index}><StoreItem className={classes.tile} data={item}/></Slide>)}
                  {skeletons.length ? skeletons.map((item, index) => <Slide index={index} key={index}><StoreItemSkeleton className={classes.tile}/></Slide>) : null}
               </Slider>
               <IconButton size='small' aria-label='previous' component={ButtonBack} className={classes.prev}>
                  <NavigateBeforeIcon/>
               </IconButton>
               <IconButton size='small' aria-label='next' component={ButtonNext} className={classes.next}>
                  <NavigateNextIcon/>
               </IconButton>
            </div>
         </CarouselProvider>
      </div>
   );
}

function StoreList(props) {
   const { height, width } = useWindowDimensions();
   const cols = Math.floor(width / 240);
   const tw = (cols > 1 ? (cols * 240 > width - 18 ? 240 - 20 : 240) : '100%')

   const classes = makeStyles((theme) => ({
      list: { justifyContent: 'space-evenly', maxWidth: '100%' },
      tile: { width: tw, marginRight: 'auto', marginLeft: 'auto' },
   }))();

   var extra = [];
   for (var i = 0; i < cols - (props.data.length % cols); i += 1) extra.push({key: i});
   var skeletons = [];
   for (var i2 = 0; props.loading && i2 < Math.max(cols * (Math.floor(height / 240)) - cols * 2, 1); i2 += 1) skeletons.push({key: i2});

   return (
      <div className={props.className} style={{ paddingLeft: cols > 1 ? 18 : 4, paddingRight: cols > 1 ? 18 : 4 }}>
         <StoreSeparator title={props.name}/>
         <GridList className={classes.list} cols={cols} cellHeight='auto'>
            {props.data.map(item => <GridListTile key={item.img}><StoreItem data={item} className={classes.tile}/></GridListTile>)}
            {extra.map(item => <GridListTile className={classes.tile} key={item.key}/>)}
            {skeletons.map(item => <GridListTile key={item.key}><StoreItemSkeleton className={classes.tile}/></GridListTile>)}
         </GridList>
      </div>
   );
}

function ItemSearch(props) {
   const { t } = useTranslation();

   const classes = makeStyles((theme) => ({
      search: {
         padding: '2px 4px',
         display: 'flex',
         alignItems: 'center',
      },
      input: {
         marginLeft: theme.spacing(1),
         flex: 1,
      },
      iconButton: {
         padding: 10,
      },
   }))();

   const categories = ['Manga', 'CG', 'Audio', 'Video', 'Game']
   const audience = [{key: 'All ages', value: true}, {key: 'Heterosexual', value: false}, {key: 'Homosexual', value: false}]

   const keywords = [
      t('RPG'),
      t('Simulation'),
      t('Stragety'),
      t('Action'),
      t('ASMR'),
      t('Anime'),
      t('3D'),
      t('2D'),
      t('Pixel art'),
      t('Live action'),
      t('Metal'),
      t('Pop'),
      t('Rock'),
   ];

   const [menuOpen, setMenuOpen] = useState(false);

   return (
     <>
        <Paper component="form" className={classes.search} variant="outlined" square>
           <IconButton className={classes.iconButton} aria-label="filter" onClick={() => setMenuOpen(!menuOpen)}>
              {menuOpen ? <MenuOpenIcon/> : <MenuIcon/>}
           </IconButton>
           <InputBase
              className={classes.input}
              placeholder={t('Search')}
              inputProps={{ 'aria-label': 'search' }}
           />
           <IconButton type="submit" className={classes.iconButton} aria-label="search">
              <SearchIcon/>
           </IconButton>
        </Paper>
        <Collapse in={menuOpen} timeout="auto" unmountOnExit>
           <Paper elevation={1} square style={{padding: 4, paddingLeft: 18, paddingRight: 18}}>
              <Typography>{t('Keywords')}</Typography>
              <Divider variant="middle"/>
              <Autocomplete
                 multiple
                 id='keywords'
                 options={keywords}
                 getOptionLabel={(option) => option}
                 defaultValue={[]}
                 renderInput={(params) => <TextField {...params} variant="outlined"/>}
              />
              <Typography>{t('Category')}</Typography>
              <Divider variant="middle"/>
              <FormGroup row style={{marginLeft: 18}}>
                 {categories.map(cat =>
                    <FormControlLabel control={<Checkbox checked={true} name={cat}/>}
                     key={cat} label={t(cat)}/>)}
              </FormGroup>
              <Typography>{t('Audience')}</Typography>
              <Divider variant="middle"/>
              <FormGroup row style={{marginLeft: 18}}>
                 {audience.map(cat =>
                    <FormControlLabel control={<Checkbox checked={cat.value} name={cat.key}/>}
                     key={cat.key} label={t(cat.key)}/>)}
              </FormGroup>
           </Paper>
        </Collapse>
     </>
   );
}

function StoreView(props) {
   const { t } = useTranslation();

   const [data, setData] = useState([]);
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
         async function fetchData() {
            function getRandomInt(max) {
               return Math.floor(Math.random() * Math.floor(max));
            }
            var result = await fetch('https://cors-anywhere.herokuapp.com/https://www.eisys-bcs.jp/data.json?key[]=dlsite-doujin_home_center2').then(result => result.json());
            console.log(result)
            result = result.data.['dlsite-doujin_home_center2'].banners.map(item => { return {
               id: 'no-id',
               author: he.decode(item.title),
               title: he.decode(item.title),
               shortdesc: 'foobar',
               desc: 'foobar',
               img: 'https:' + item.ssl_path,
               cat: 'Misc',
               price: getRandomInt(3000) + '円',
               rating: getRandomInt(5),
            }})
            setData(result);
            setLoaded(true)
         }
         fetchData();
   }, []);

   const classes = makeStyles((theme) => ({
      root: {
         paddingTop: 105,
         paddingBottom: 65,
      },
      stickyBottom: {
         position: 'fixed',
         width: '100%',
         bottom: 0,
      },
      title: { flexGrow: 1 },
   }))();

   return (
      <>
        <AppBar position="fixed">
           <Toolbar variant="dense">
              <Typography variant="h6" className={classes.title}>
                 {t('DoujinSea')}
              </Typography>
              <IconButton aria-label="help">
                  <HelpOutlineIcon />
              </IconButton>
              <IconButton aria-label="cart">
                 <StyledBadge badgeContent={4} color="secondary">
                    <ShoppingCartIcon />
                 </StyledBadge>
              </IconButton>
           </Toolbar>
           <ItemSearch/>
        </AppBar>
        <Paper className={classes.root} elevation={0} square>
           <StoreCarousel name='Featured' data={data} loading={!loaded}/>
           <StoreCarousel name='Popular' data={data} loading={!loaded}/>
           <StoreList name='Latest' data={data} loading={!loaded}/>
        </Paper>
        <BottomNavigation className={classes.stickyBottom}
           value='store'
           onChange={(event, newValue) => {}}
           showLabels
        >
           <BottomNavigationAction label={t('Store')} value='store' icon={<StoreIcon/>} />
           <BottomNavigationAction label={t('Library')} value='library' icon={<LibraryBooksIcon/>} />
           <BottomNavigationAction label={t('Account')} value='account' icon={<AccountCircleIcon/>} />
        </BottomNavigation>
      </>
   )
}

export default function Main() {
   const prefersDarkMode = false; // useMediaQuery('(prefers-color-scheme: dark)');
   const theme = React.useMemo(() => createMuiTheme({
      palette: {
         type: prefersDarkMode ? 'dark' : 'light',
         primary: red,
      },
   }), [prefersDarkMode]);

   return (
      <>
         <CssBaseline/>
         <ThemeProvider theme={theme}>
            <StoreView/>
         </ThemeProvider>
      </>
   );
}