/*!

=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================

* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)

* Designed and Coded by Simmmple & Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/

import React from 'react';

// Chakra imports
import {
  Avatar,
  Badge,
  Button,
  Checkbox,
  Flex,
  Grid,
  Icon,
  Progress,
  Stack,
  Stat,
  StatHelpText,
  StatLabel,
  StatNumber,
  Text,
  useColorMode,
  useColorModeValue,
} from '@chakra-ui/react';
// Assets
import avatar4 from 'assets/img/avatars/avatar4.png';
import basicDark from 'assets/img/BgMusicCard.png';
import basicBlue from 'assets/img/basic-auth.png';
import { BsCircleFill } from 'react-icons/bs';
import { IoEllipsisHorizontalSharp } from 'react-icons/io5';
import {
  CartIcon,
  DocumentIcon,
  GlobeIcon,
  HomeIcon,
  WalletIcon,
} from 'components/Icons/Icons';
// Custom components
import Card from 'components/Card/Card';
import CardHeader from 'components/Card/CardHeader';
import DonutChart from 'components/Charts/DonutChart';
import LineChart from 'components/Charts/LineChart';
import IconBox from 'components/Icons/IconBox';
import { HSeparator } from 'components/Separator/Separator';
import {
  donutChartDataGeneral,
  donutChartOptionsGeneral,
  lineChartDataGeneral,
  lineChartOptionsGeneral,
} from 'variables/charts';

function General() {
  const { colorMode } = useColorMode();

  const textColor = useColorModeValue('gray.700', 'white');
  const iconBoxInside = useColorModeValue('white', 'white');
  const iconBlue = useColorModeValue('blue.500', 'blue.500');
  const bgSalaryCard = useColorModeValue('gray.50', 'navy.900');
  const bgButton = useColorModeValue('gray.700', 'blue.500');

  return (
    <Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
      <Grid
        templateColumns={{
          sm: '1fr',
          lg: '0.5fr 1.5fr 1fr',
          xl: '1fr 1.7fr 1.5fr',
        }}
        gap='24px'
        mb='24px'
      >
        <Card
          bgImage={colorMode === 'light' ? basicDark : basicBlue}
          bgSize='cover'
          bgPosition='50%'
        >
          <Flex
            p={{ sm: '24px 52px', lg: '12px 26px', xl: '24px 52px' }}
            direction='column'
            align='center'
            justify='center'
            w='100%'
            h='100%'
          >
            <Text color='#fff' fontSize='2xl' fontWeight='normal'>
              Earnings
            </Text>
            <Text color='#fff' fontSize='5xl' fontWeight='bold' mb='12px'>
              $15,800
            </Text>
            <Badge
              bg='rgba(255, 255, 255, 0.3)'
              mb='26px'
              color='#fff'
              w='150px'
              borderRadius='8px'
              display='flex'
              justify='center'
              align='center'
            >
              <Text
                textAlign='center'
                py='6px'
                fontSize='11px'
                w='100%'
                h='100%'
                alignSelf='center'
              >
                +15% SINCE LAST WEEK
              </Text>
            </Badge>
            <Button
              variant={colorMode === 'light' ? 'primary' : 'light'}
              py='16px'
              w='155px'
              h='25px'
            >
              VIEW MORE
            </Button>
          </Flex>
        </Card>
        <Grid
          templateColumns={{
            sm: '1fr',
            md: 'repeat(2, 1fr)',
          }}
          templateRows='repeat(2, 1fr)'
          gap='24px'
        >
          <Card px={{ lg: '8px', xl: '22px' }}>
            <Flex
              flexDirection='row'
              align='center'
              justify='center'
              w='100%'
              h='100%'
            >
              <Stat me='auto'>
                <StatLabel
                  fontSize='sm'
                  color='gray.400'
                  fontWeight='bold'
                  pb='.1rem'
                >
                  Today's Money
                </StatLabel>
                <Flex>
                  <StatNumber fontSize='lg' color={textColor}>
                    $53,000
                  </StatNumber>
                  <StatHelpText
                    alignSelf='flex-end'
                    justifySelf='flex-end'
                    m='0px'
                    color='green.400'
                    fontWeight='bold'
                    ps='3px'
                    fontSize='md'
                  >
                    +55%
                  </StatHelpText>
                </Flex>
              </Stat>
              <IconBox h={'45px'} w={'45px'} bg={bgButton}>
                <WalletIcon h={'24px'} w={'24px'} color={iconBoxInside} />
              </IconBox>
            </Flex>
          </Card>
          <Card px={{ lg: '8px', xl: '22px' }}>
            <Flex
              flexDirection='row'
              align='center'
              justify='center'
              w='100%'
              h='100%'
            >
              <Stat me='auto'>
                <StatLabel
                  fontSize='sm'
                  color='gray.400'
                  fontWeight='bold'
                  pb='.1rem'
                >
                  New Clients
                </StatLabel>
                <Flex>
                  <StatNumber fontSize='lg' color={textColor}>
                    +$3,052
                  </StatNumber>
                  <StatHelpText
                    alignSelf='flex-end'
                    justifySelf='flex-end'
                    m='0px'
                    color='red.500'
                    fontWeight='bold'
                    ps='3px'
                    fontSize='md'
                  >
                    -14%
                  </StatHelpText>
                </Flex>
              </Stat>
              <IconBox h={'45px'} w={'45px'} bg={bgButton}>
                <DocumentIcon h={'24px'} w={'24px'} color={iconBoxInside} />
              </IconBox>
            </Flex>
          </Card>
          <Card px={{ lg: '8px', xl: '22px' }}>
            <Flex
              flexDirection='row'
              align='center'
              justify='center'
              w='100%'
              h='100%'
            >
              <Stat me='auto'>
                <StatLabel
                  fontSize='sm'
                  color='gray.400'
                  fontWeight='bold'
                  pb='.1rem'
                >
                  Today's Users
                </StatLabel>
                <Flex>
                  <StatNumber fontSize='lg' color={textColor}>
                    $2,300
                  </StatNumber>
                  <StatHelpText
                    alignSelf='flex-end'
                    justifySelf='flex-end'
                    m='0px'
                    color='green.400'
                    fontWeight='bold'
                    ps='3px'
                    fontSize='md'
                  >
                    +5%
                  </StatHelpText>
                </Flex>
              </Stat>
              <IconBox h={'45px'} w={'45px'} bg={bgButton}>
                <GlobeIcon h={'24px'} w={'24px'} color={iconBoxInside} />
              </IconBox>
            </Flex>
          </Card>
          <Card px={{ lg: '8px', xl: '22px' }}>
            <Flex
              flexDirection='row'
              align='center'
              justify='center'
              w='100%'
              h='100%'
            >
              <Stat me='auto'>
                <StatLabel
                  fontSize='sm'
                  color='gray.400'
                  fontWeight='bold'
                  pb='.1rem'
                >
                  Total Sales
                </StatLabel>
                <Flex>
                  <StatNumber fontSize='lg' color={textColor}>
                    $173,000
                  </StatNumber>
                  <StatHelpText
                    alignSelf='flex-end'
                    justifySelf='flex-end'
                    m='0px'
                    color='green.400'
                    fontWeight='bold'
                    ps='3px'
                    fontSize='md'
                  >
                    +8%
                  </StatHelpText>
                </Flex>
              </Stat>
              <IconBox h={'45px'} w={'45px'} bg={bgButton}>
                <CartIcon h={'24px'} w={'24px'} color={iconBoxInside} />
              </IconBox>
            </Flex>
          </Card>
        </Grid>
        <Card>
          <CardHeader mb='28px'>
            <Flex>
              <Avatar
                src={avatar4}
                w='40px'
                h='40px'
                mr='15px'
                borderRadius='12px'
              />
              <Flex direction='column'>
                <Text color={textColor} fontSize='md' fontWeight='bold'>
                  Esthera Jackson
                </Text>
                <Text color='gray.400' fontSize='sm' fontWeight='normal'>
                  2h ago
                </Text>
              </Flex>
            </Flex>
          </CardHeader>

          <Flex direction='column' w='100%'>
            <Flex direction='column' maxW='400px' mb='32px'>
              <Text color={textColor} fontSize='lg' fontWeight='bold' mb='4px'>
                I need a Ruby developer for my new website.
              </Text>
              <Text color='gray.400' fontSize='sm' fontWeight='normal'>
                The website was initially built in PHP, I need a professional
                ruby programmer to shift it.
              </Text>
            </Flex>
            <Flex
              justify='space-between'
              w='100%'
              bg={bgSalaryCard}
              borderRadius='12px'
              p='20px 25px'
              direction={{ sm: 'row' }}
            >
              <Text color='gray.400' fontSize='sm' fontWeight='normal'>
                ${' '}
                <Text
                  as='span'
                  fontSize='2xl'
                  color={textColor}
                  fontWeight='bold'
                >
                  3,000
                </Text>{' '}
                / month
              </Text>
              <Button
                variant='outlined'
                w={{ sm: '75px', md: '125px', lg: '75px', xl: '125px' }}
                h='35px'
              >
                APPLY
              </Button>
            </Flex>
          </Flex>
        </Card>
      </Grid>
      <Grid
        templateColumns={{ sm: '1fr', lg: '1.85fr 1fr', xl: '70% 30%' }}
        gap='24px'
      >
        <Card p={{ sm: '16px', md: '22px' }} maxW={{ sm: '330px', md: '100%' }}>
          <CardHeader>
            <Flex justify='space-between' w='100%'>
              <Text color={textColor} fontSize='lg' fontWeight='bold'>
                To do List
              </Text>
              <Text color='gray.400' fontSize='md' fontWeight='normal'>
                23 - 30 March 2020
              </Text>
            </Flex>
          </CardHeader>

          <Flex
            direction='column'
            w='100%'
            overflowX={{ sm: 'scroll', md: 'hidden' }}
          >
            <HSeparator my='14px' />
            <Flex>
              <Flex
                bgColor='blue.500'
                borderRadius='12px'
                minWidth='3px'
                h='100%'
              />
              <Flex direction='column' p='12px 22px' w='100%'>
                <Flex justify='space-between' mb='18px'>
                  <Flex align='center'>
                    <Checkbox
                      me='16px'
                      colorScheme='blue'
                      size='lg'
                      defaultIsChecked
                    />
                    <Text color={textColor} fontSize='md' fontWeight='bold'>
                      Check status
                    </Text>
                  </Flex>
                  <Icon
                    as={IoEllipsisHorizontalSharp}
                    color='gray.400'
                    w='20px'
                    h='20px'
                    cursor='pointer'
                  />
                </Flex>
                <Stack
                  direction='row'
                  spacing={{
                    sm: '20px',
                    md: '100px',
                    lg: '80px',
                    xl: '180px',
                  }}
                  ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
                >
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Date
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      22 July 2022
                    </Text>
                  </Flex>
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Project
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      2414_VR4sf3#
                    </Text>
                  </Flex>
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Company
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      Creative Tim
                    </Text>
                  </Flex>
                </Stack>
              </Flex>
            </Flex>
            <HSeparator my='14px' />
            <Flex>
              <Flex
                bgColor='orange.300'
                borderRadius='12px'
                minWidth='3px'
                h='100%'
              />
              <Flex direction='column' p='12px 22px' w='100%'>
                <Flex justify='space-between' mb='18px'>
                  <Flex align='center'>
                    <Checkbox me='16px' colorScheme='blue' size='lg' />
                    <Text color={textColor} fontSize='md' fontWeight='bold'>
                      Management discussion
                    </Text>
                  </Flex>
                  <Icon
                    as={IoEllipsisHorizontalSharp}
                    color='gray.400'
                    w='20px'
                    h='20px'
                    cursor='pointer'
                  />
                </Flex>
                <Stack
                  direction='row'
                  spacing={{
                    sm: '20px',
                    md: '100px',
                    lg: '80px',
                    xl: '180px',
                  }}
                  ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
                >
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Date
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      22 July 2022
                    </Text>
                  </Flex>
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Project
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      4411_8sIsdd23
                    </Text>
                  </Flex>
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Company
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      Apple
                    </Text>
                  </Flex>
                </Stack>
              </Flex>
            </Flex>
            <HSeparator my='14px' />
            <Flex>
              <Flex
                bgColor='pink.300'
                borderRadius='12px'
                minWidth='3px'
                h='100%'
              />
              <Flex direction='column' p='12px 22px' w='100%'>
                <Flex justify='space-between' mb='18px'>
                  <Flex align='center'>
                    <Checkbox me='16px' colorScheme='blue' size='lg' />
                    <Text color={textColor} fontSize='md' fontWeight='bold'>
                      New channel distribution
                    </Text>
                  </Flex>
                  <Icon
                    as={IoEllipsisHorizontalSharp}
                    color='gray.400'
                    w='20px'
                    h='20px'
                    cursor='pointer'
                  />
                </Flex>
                <Stack
                  direction='row'
                  spacing={{
                    sm: '20px',
                    md: '100px',
                    lg: '80px',
                    xl: '180px',
                  }}
                  ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
                >
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Date
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      22 July 2022
                    </Text>
                  </Flex>
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Project
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      827d_kdl33D1s
                    </Text>
                  </Flex>
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Company
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      Microsoft
                    </Text>
                  </Flex>
                </Stack>
              </Flex>
            </Flex>
            <HSeparator my='14px' />
            <Flex>
              <Flex
                bgColor='purple.500'
                borderRadius='12px'
                minWidth='3px'
                h='100%'
              />{' '}
              <Flex direction='column' p='12px 22px' w='100%'>
                <Flex justify='space-between' mb='18px'>
                  <Flex align='center'>
                    <Checkbox
                      me='16px'
                      colorScheme='blue'
                      size='lg'
                      defaultIsChecked
                    />
                    <Text color={textColor} fontSize='md' fontWeight='bold'>
                      IOS App development
                    </Text>
                  </Flex>
                  <Icon
                    as={IoEllipsisHorizontalSharp}
                    color='gray.400'
                    w='20px'
                    h='20px'
                    cursor='pointer'
                  />
                </Flex>
                <Stack
                  direction='row'
                  spacing={{
                    sm: '20px',
                    md: '100px',
                    lg: '80px',
                    xl: '180px',
                  }}
                  ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
                >
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Date
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      22 July 2022
                    </Text>
                  </Flex>
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Project
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      88s1_349DA2sa
                    </Text>
                  </Flex>
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Company
                    </Text>
                    <Text color='gray.500' fontWeight='bold' fontSize='md'>
                      Facebook
                    </Text>
                  </Flex>
                </Stack>
              </Flex>
            </Flex>
          </Flex>
        </Card>
        <Flex direction='column'>
          <Card
            mb='24px'
            maxW={{ sm: '330px', md: '100%' }}
            px={{ sm: '0px', lg: '22px' }}
          >
            <CardHeader>
              <Flex direction='column' w='100%'>
                <Flex
                  justify='space-between'
                  w='100%'
                  px={{ sm: '22px', lg: '0px' }}
                >
                  <Flex align='center'>
                    <IconBox h={'45px'} w={'45px'} bg={iconBlue} me='16px'>
                      <HomeIcon h={'24px'} w={'24px'} color={iconBoxInside} />
                    </IconBox>
                    <Flex direction='column'>
                      <Text color='gray.400' fontWeight='normal' fontSize='md'>
                        Tasks
                      </Text>
                      <Text color={textColor} fontWeight='bold' fontSize='xl'>
                        480
                      </Text>
                    </Flex>
                  </Flex>
                  <Flex direction='column' alignSelf='flex-end' minW='125px'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      60%
                    </Text>
                    <Progress
                      colorScheme='blue'
                      size='sm'
                      borderRadius='15px'
                      value={60}
                    />
                  </Flex>
                </Flex>
                <LineChart
                  chartData={lineChartDataGeneral}
                  chartOptions={lineChartOptionsGeneral}
                />
              </Flex>
            </CardHeader>
          </Card>
          <Card maxW={{ sm: '330px', md: '100%' }}>
            <Flex justify='space-between' w='100%' minH='190px'>
              <Flex direction='column'>
                <Flex align='center'>
                  <IconBox h={'45px'} w={'45px'} bg={iconBlue} me='16px'>
                    <DocumentIcon h={'24px'} w={'24px'} color={iconBoxInside} />
                  </IconBox>
                  <Flex direction='column'>
                    <Text color='gray.400' fontWeight='normal' fontSize='md'>
                      Projects
                    </Text>
                    <Text color={textColor} fontWeight='bold' fontSize='xl'>
                      115
                    </Text>
                  </Flex>
                </Flex>
                <Flex direction='column' mt='36px'>
                  <Flex align='center'>
                    <Icon
                      as={BsCircleFill}
                      color='blue.500'
                      w='10px'
                      h='10px'
                      me='8px'
                    />
                    <Text color={textColor} fontWeight='normal' fontSize='md'>
                      Done
                    </Text>
                  </Flex>
                  <Flex align='center'>
                    <Icon
                      as={BsCircleFill}
                      color='gray.400'
                      w='10px'
                      h='10px'
                      me='8px'
                    />
                    <Text color={textColor} fontWeight='normal' fontSize='md'>
                      In progress
                    </Text>
                  </Flex>
                </Flex>
              </Flex>
              <DonutChart
                chartData={donutChartDataGeneral}
                chartOptions={donutChartOptionsGeneral}
              />
            </Flex>
          </Card>
        </Flex>
      </Grid>
    </Flex>
  );
}

export default General;