import { Badge, Box, Button, CircularProgress, Divider, IconButton, LinearProgress, Skeleton, Tooltip, Typography } from '@mui/material';
import React from 'react';
import { messageChannelContext } from '../../../provider/MessageChannel';
import { queueContext } from '../../../provider/QueueProvider';
import DeleteIcon from '@mui/icons-material/Delete';

import useDownloadManager from '../DownloadManager/DownloadManager';

const Queue: React.FC = () => {
  const { data, current } = useDownloadManager();
  const queue = React.useContext(queueContext);
  const msg = React.useContext(messageChannelContext);


  if (!msg)
    return <>Never</>;

  return data || queue.length > 0 ? <>
    {data && <>
    <Box sx={{
      display: 'flex',
      width: '100%',
      flexDirection: 'column',
      alignItems: 'center',
    }}>
      <Box sx={{
          marginTop: '2rem',
          marginBottom: '1rem',
          height: '12rem',
          width: '93vw',
          maxWidth: '93rem',
          backgroundColor: '#282828',
          boxShadow: '0px 0px 50px #00000090',
          borderRadius: '10px',
          display: 'flex',
          transition: '250ms'
          }}>
        <img style={{
            borderRadius: '5px',
            margin: '5px',
            boxShadow: '0px 0px 10px #00000090',
            userSelect: 'none',
          }}
        src={data.downloadInfo.image} height='auto' width='auto' alt="Thumbnail" />
        <Box
          sx={{
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          justifyContent: 'center'
        }}>
        <Box sx={{
          display: 'flex',
        }}>
        <Box sx={{
          //backgroundColor: '#ff0000',
          width: '70%',
          marginLeft: '10px'
        }}>
          <Box sx={{
            flexDirection: 'column',
            display: 'flex',
            justifyContent: 'space-between',
          }}>
            <Typography color='text.primary' sx={{
              fontSize: '1.8rem',
            }}>
              {data.downloadInfo.parent.title}
            </Typography>
            <Typography color='text.primary' sx={{
              fontSize: '1.2rem',
            }}>
              {data.downloadInfo.title}
            </Typography>
          </Box>
        </Box>
        <Box sx={{
          //backgroundColor: '#00ff00',
          width: '30%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
          <Typography color='text.primary' sx={{
            fontSize: '1.8rem',
          }}>
            Downloading: {data.downloadInfo.language.name}
          </Typography>
        </Box>
        </Box>
        <Box sx={{
          height: '50%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          //backgroundColor: '#0000ff',
        }}>
          <LinearProgress variant='determinate'
          sx={{
            height: '20px',
            width: '97.53%',
            margin: '10px',
            boxShadow: '0px 0px 10px #00000090',
            borderRadius: '10px',
          }} value={(typeof data.progress.percent === 'string' ? parseInt(data.progress.percent) : data.progress.percent)}
           />
          <Box> 
            <Typography color='text.primary' 
            sx={{
              fontSize: '1.3rem',
            }}>
              {data.progress.cur} / {(data.progress.total)} parts ({data.progress.percent}% | {formatTime(data.progress.time)} | {(data.progress.downloadSpeed / 1024 / 1024).toFixed(2)} MB/s | {(data.progress.bytes / 1024 / 1024).toFixed(2)}MB)
            </Typography>
          </Box>
        </Box>
        </Box>
      </Box>
      </Box>
    </>
    }
    {
      current && !data && <>
      <Box sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}>
        <Box sx={{
          marginTop: '2rem',
          marginBottom: '1rem',
          height: '12rem',
          width: '93vw',
          maxWidth: '93rem',
          backgroundColor: '#282828',
          boxShadow: '0px 0px 50px #00000090',
          borderRadius: '10px',
          display: 'flex',
          overflow: 'hidden',
          transition: '250ms'
          }}>
        <img style={{
            borderRadius: '5px',
            margin: '5px',
            boxShadow: '0px 0px 10px #00000090',
            userSelect: 'none',
            maxWidth: '20.5rem',
          }}
        src={current.image} height='auto' width='auto' alt="Thumbnail" />
        <Box
          sx={{
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          justifyContent: 'center',
          //backgroundColor: '#ffffff0f'
        }}>
        <Box sx={{
          display: 'flex',
          
        }}>
        <Box sx={{
          width: '70%',
          marginLeft: '10px'
        }}>
          <Box sx={{
            flexDirection: 'column',
            display: 'flex',
            justifyContent: 'space-between',
          }}>
            <Typography color='text.primary' sx={{
              fontSize: '1.8rem',
            }}>
              {current.parent.title}
            </Typography>
            <Typography color='text.primary' sx={{
              fontSize: '1.2rem',
            }}>
              {current.title}
            </Typography>
          </Box>
        </Box>
        <Box sx={{
          //backgroundColor: '#00ff00',
          width: '30%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
          <Box sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            position: 'relative',
          }}>
          <Typography color='text.primary' sx={{
            fontSize: '1.8rem',
          }}>
            Downloading:
          </Typography>
          <CircularProgress variant="indeterminate" sx={{
            marginLeft: '2rem',
          }}/>
          </Box>
        </Box>
        </Box>
        <Box sx={{
          height: '50%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          //backgroundColor: '#0000ff',
        }}>
          <LinearProgress variant='indeterminate'
          sx={{
            height: '20px',
            width: '97.53%',
            margin: '10px',
            boxShadow: '0px 0px 10px #00000090',
            borderRadius: '10px',
          }}
           />
          <Box> 
            <Typography color='text.primary' 
            sx={{
              fontSize: '1.3rem',
            }}>
              0 / ? parts (0% | XX:XX | 0 MB/s | 0MB)
            </Typography>
          </Box>
        </Box>
        </Box>
      </Box>
      </Box>
      </>
    }
    {queue.map((queueItem, index, { length }) => {
      return <Box key={`queue_item_${index}`} sx={{
        display: 'flex',
        mb: '-1.5rem',
        flexDirection: 'column',
        alignItems: 'center',
      }}>
        <Box sx={{
          marginTop: '1.5rem',
          marginBottom: '1.5rem',
          height: '11rem',
          width: '90vw',
          maxWidth: '90rem',
          backgroundColor: '#282828',
          boxShadow: '0px 0px 10px #00000090',
          borderRadius: '10px',
          display: 'flex',
          overflow: 'hidden',
          }}>
          <img style={{
            borderRadius: '5px',
            margin: '5px',
            boxShadow: '0px 0px 5px #00000090',
            userSelect: 'none',
            maxWidth: '18.5rem'
          }}
          src={queueItem.image} height='auto' width='auto' alt="Thumbnail" />
          <Box sx={{
            margin: '5px',
            display: 'flex',
            width: '100%',
            justifyContent: 'space-between',
            }}>
              <Box sx={{
                width: '30%',
                marginRight: '5px',
                marginLeft: '5px',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}>
                <Typography color='text.primary' sx={{
                  fontSize: '1.8rem',
                  overflow: 'hidden',
                  whiteSpace: 'nowrap',
                  textOverflow: 'ellipsis',
                }}>
                  {queueItem.parent.title}
                </Typography>
                <Typography color='text.primary' sx={{
                  fontSize: '1.6rem',
                  marginTop: '-0.4rem',
                  marginBottom: '0.4rem',
                }}>
              S{queueItem.parent.season}E{queueItem.episode}
              </Typography>
                <Typography color='text.primary' sx={{
                  fontSize: '1.2rem',
                  marginTop: '-0.4rem',
                  marginBottom: '0.4rem',
                  textOverflow: 'ellipsis',
                }}>
                {queueItem.title}
              </Typography>
              </Box>
              <Box sx={{
                width: '40%',
                marginRight: '5px',
                marginLeft: '5px',
                display: 'flex',
                flexDirection: 'column',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                justifyContent: 'space-between',
              }}>
                <Typography color='text.primary' sx={{
                  fontSize: '1.8rem',
                  overflow: 'hidden',
                  whiteSpace: 'nowrap',
                  textOverflow: 'ellipsis',
                }}>
                  Dub(s): {queueItem.dubLang.join(', ')}
                </Typography>
                <Typography color='text.primary' sx={{
                  fontSize: '1.8rem',
                  overflow: 'hidden',
                  whiteSpace: 'nowrap',
                  textOverflow: 'ellipsis',
                }}>
                  Sub(s): {queueItem.dlsubs.join(', ')}
                </Typography>
                <Typography color='text.primary' sx={{
                  fontSize: '1.8rem',
                  
                }}>
                Quality: {queueItem.q}
                </Typography>
              </Box>
              <Box sx={{
                marginRight: '5px',
                marginLeft: '5px',
                width: '30%',
                justifyContent: 'center',
                alignItems: 'center',
                display: 'flex'
              }}>
              <Tooltip title="Delete from queue" arrow placement='top'>
                <IconButton
                onClick={() => {
              msg.removeFromQueue(index);
            }}
            sx={{
              backgroundColor: '#ff573a25',
              height: '40px',
              transition: '250ms',
              '&:hover' : {
                backgroundColor: '#ff573a',
              } 
            }}>
                  <DeleteIcon />
                </IconButton>
                </Tooltip>
                </Box>
              </Box>
          </Box>
        </Box>
      ;
    })}
  </> : <Box sx={{
    display: 'flex',
    width: '100%',
    height: '12rem',
    flexDirection: 'column',
    alignItems: 'center',
  }}>
    <Typography color='text.primary' sx={{
      fontSize: '2rem',
      margin: '10px'
    }}>
      Selected episodes will be shown here
    </Typography>
    <Box sx={{
      display: 'flex',
      margin: '10px'    
      }}>
      <Skeleton variant='rectangular' height={'10rem'} width={'20rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
      <Box sx={{
        display: 'flex',
        flexDirection: 'column',
        }}>
        <Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
        <Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
      </Box>
    </Box>
    <Box sx={{
      display: 'flex',
      margin: '10px'   
      }}>
      <Skeleton variant='rectangular' height={'10rem'} width={'20rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
      <Box sx={{
        display: 'flex',
        flexDirection: 'column',
        }}>
        <Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
        <Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
      </Box>
    </Box>
  </Box>;
};

const formatTime = (time: number) => {
  time = Math.floor(time / 1000);
  const minutes = Math.floor(time / 60);
  time = time % 60;

  return `${minutes.toFixed(0).length < 2 ? `0${minutes}` : minutes}m${time.toFixed(0).length < 2 ? `0${time}` : time}s`;
};

export default Queue;