import {
  AddHome,
  AutoAwesome,
  Cloud,
  GitHub,
  InstallMobile,
  Storage,
} from '@mui/icons-material'
import { Box, Button, Card, Grid, styled, Typography } from '@mui/joy'
import { useNavigate } from 'react-router-dom'
const IconContainer = styled('div')({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: '50%',
  minWidth: '60px',
  height: '60px',
  marginRight: '16px',
})

const ButtonContainer = styled('div')({
  display: 'flex',
  justifyContent: 'center',
  marginTop: 'auto',
})

function StartOptionCard({ icon: Icon, title, description, button, index }) {
  return (
    <Card
      variant='plain'
      sx={{
        p: 2,
        display: 'flex',
        minHeight: '300px',
        py: 4,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}
      data-aos-delay={100 * index}
      data-aos-anchor='[data-aos-id-getting-started-container]'
      data-aos='fade-up'
    >
      {/* Changes are within this div */}
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <IconContainer>{Icon}</IconContainer>

        <Typography level='h4' textAlign={'center'}>
          {title}
        </Typography>
      </Box>

      <Typography level='body-md' color='neutral' lineHeight={1.6}>
        {description}
      </Typography>

      <ButtonContainer>{button}</ButtonContainer>
    </Card>
  )
}

const GettingStarted = () => {
  const navigate = useNavigate()
  const information = [
    {
      title: 'Donetick Web',
      icon: <Cloud style={{ fontSize: '48px' }} />,
      description:
        'The easiest way! just create account and start using DoneTick',
      button: (
        <Button
          size='lg'
          fullWidth
          startDecorator={<AutoAwesome />}
          onClick={() => {
            navigate('/my/chores')
          }}
        >
          Start Now!
        </Button>
      ),
    },
    {
      title: 'Selfhosted',
      icon: <Storage style={{ fontSize: '48px' }} />,
      description: 'Download the binary and manage your own DoneTick instance',
      button: (
        <Button
          size='lg'
          fullWidth
          startDecorator={<GitHub />}
          onClick={() => {
            window.open(
              'https://github.com/donetick/donetick/releases',
              '_blank',
            )
          }}
        >
          Github Releases
        </Button>
      ),
    },
    {
      title: 'Hassio Addon',
      icon: <AddHome style={{ fontSize: '48px' }} />,
      description:
        'have Home Assistant? install DoneTick as a Home Assistant Addon with single click',
      button: (
        <Button
          size='lg'
          fullWidth
          startDecorator={<InstallMobile />}
          onClick={() => {
            window.open(
              'https://my.home-assistant.io/redirect/supervisor_add_addon_repository/?repository_url=https%3A%2F%2Fgithub.com%2Fdonetick%2Fhassio-addons',
            )
          }}
        >
          Add Addon
        </Button>
      ),
    },
  ]
  return (
    <Box
      sx={{
        alignContent: 'center',
        textAlign: 'center',
        display: 'flex',
        flexDirection: 'column',
        mt: 2,
      }}
    >
      <Typography level='h4' mt={2} mb={4}>
        Getting Started
      </Typography>

      <Box maxWidth={'lg'} sx={{ mb: 8 }}>
        <Typography level='body-md' color='neutral'>
          you can start using DoneTick in multiple ways, easiest way is to use
          Donetick Web and you can start in seconds, or if you are into
          selfhosting you can download the binary and run it on your own server,
          or if you are using Home Assistant you can install DoneTick as a Home
          Assistant Addon
        </Typography>
        <div data-aos-id-getting-started-container>
          <Grid container spacing={4} mt={4}>
            {information.map((info, index) => (
              <Grid item xs={12} md={4} key={index}>
                <StartOptionCard
                  icon={info.icon}
                  title={info.title}
                  description={info.description}
                  button={info.button}
                />
              </Grid>
            ))}
          </Grid>
        </div>
      </Box>
    </Box>
  )
}

export default GettingStarted