import React, { useState } from 'react'
import { EmptyBlock } from '../components/EmptyBlock'
import { Container } from '../components/Container'
import { InProgressItem } from '../components/InProgressItem'
import styled from 'styled-components'
import { Breakpoint } from '../../../components/Breakpoint'
import { Title } from '../../../components/Typography'
import { observer } from 'mobx-react-lite'
import { AuthStore } from '../../../stores/AuthStore'
import { ResultItem } from '../components/ResultItem'

const StyledMain = styled.div`
  padding-top: 50px;

  ${props => props.theme.breakpoints.down('s')} {
    padding-top: 32px;
  }
`

const StyledItemWrap = styled.div`
  display: flex;
  flex-direction: row;

  ${props => props.theme.breakpoints.down('s')} {
    flex-direction: column;
  }
`
const StyledProgress = styled.div`
  ${props => props.theme.breakpoints.up('s')} {
    width: 351px;
    padding-right: 51px;
  }
`
const StyledRecent = styled.div`
  flex: auto;
`
const StyledSubTitle = styled(Title)`
  margin-bottom: 14px;

  ${props => props.theme.breakpoints.down('s')} {
    padding-left: 15px;
  }
`
const StyledEmptyBlock = styled(EmptyBlock)`
  margin-bottom: 32px`
export const Dashboard = observer(() => {
	const [{ userInfo }] = useState(AuthStore.instance())
	const [inProgress, setInProgress] = useState([])
	const [history, setHistory] = useState(['1'])
	return (
		<Container>
			<Breakpoint s up>
				<Title level={0}>Hello, {userInfo?.firstName}!</Title>
			</Breakpoint>
			<Breakpoint s down>
				<Title level={2} style={{ marginBottom: 10 }}>Hello, {userInfo?.firstName}!</Title>
			</Breakpoint>
			<StyledMain>
				{!inProgress.length && <StyledEmptyBlock />}
				<StyledItemWrap>
					{!!inProgress.length &&
						(
							<StyledProgress>
								<StyledSubTitle level={3}>Tests in Progress</StyledSubTitle>
								<InProgressItem step={0} />
								<InProgressItem step={1} />
								<InProgressItem step={1} error />
							</StyledProgress>
						)}
					{!!history.length && (
						<StyledRecent>
							<StyledSubTitle level={3}>Recent Test Results</StyledSubTitle>
							<ResultItem />
							<ResultItem />
							<ResultItem />
						</StyledRecent>
					)}
				</StyledItemWrap>
			</StyledMain>
		</Container>
	)
})
