/*!

=========================================================
* 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.

*/

// Chakra imports
import {
  Badge,
  Box,
  Button,
  Flex,
  Grid,
  Icon,
  Progress,
  Spacer,
  Stack,
  Stat,
  StatHelpText,
  StatLabel,
  StatNumber,
  Switch,
  Text,
  useColorMode,
  useColorModeValue,
} from '@chakra-ui/react';
// Assets
import BackgroundCard1 from 'assets/img/BackgroundCard1.png';
import BgMusicCard from 'assets/img/BgMusicCard.png';
import BgMusicCardDark from 'assets/img/bgMusicCardDark.png';
import {
  ClockIcon,
  DocumentIcon,
  RocketIcon,
  SettingsIcon,
  WalletIcon,
} from 'components/Icons/Icons';
import { AiFillBackward, AiFillForward } from 'react-icons/ai';
import { BsBatteryCharging, BsMusicNoteBeamed } from 'react-icons/bs';
// Custom components
import EventCalendar from 'components/Calendars/EventCalendar';
import Card from 'components/Card/Card';
import CardHeader from 'components/Card/CardHeader';
import LineChart from 'components/Charts/LineChart';
import IconBox from 'components/Icons/IconBox';
import { HSeparator } from 'components/Separator/Separator';
import TimelineRow from 'components/Tables/TimelineRow';
import React, { useState } from 'react';
import {
  FaCheckCircle,
  FaLightbulb,
  FaPaypal,
  FaPlay,
  FaRegLightbulb,
  FaShare,
  FaUser,
  FaWallet,
} from 'react-icons/fa';
import { RiArrowDropRightLine, RiMastercardFill } from 'react-icons/ri';
import { calendarDataWidgets } from 'variables/calendar';
import {
  lineChartDataWidgets1,
  lineChartDataWidgets2,
  lineChartDataWidgets3,
  lineChartOptionsWidgets1,
  lineChartOptionsWidgets2,
  lineChartOptionsWidgets3,
} from 'variables/charts';
import { timelineData } from 'variables/general';

function Widgets() {
  const [toggleSwitch, setToggleSwitch] = useState(false);
  const { colorMode } = useColorMode();

  const textColor = useColorModeValue('gray.700', 'white');
  const iconBlue = useColorModeValue('blue.500', 'white');
  const secondaryIconBlue = useColorModeValue('gray.100', 'blue.500');
  const iconBoxInside = useColorModeValue('white', 'blue.500');
  const bgCard = useColorModeValue(
    'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)',
    'navy.800'
  );
  const iconBoxColor = useColorModeValue(
    'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)',
    'blue.500'
  );

  return (
    <Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
      <Grid
        templateColumns={{ sm: '1fr', md: '1fr 1fr', lg: '1fr 1fr 2fr' }}
        templateRows='1fr'
        gap='24px'
        mb='24px'
      >
        <Stack direction='column' spacing='24px'>
          <Card bg={bgCard}>
            <Flex justify='space-between' w='100%' align='center'>
              <Flex direction='column'>
                <Text fontSize='sm' color='#fff' fontWeight='normal' mb='2px'>
                  Battery Health
                </Text>
                <Text fontSize='lg' color='#fff' fontWeight='bold'>
                  99%
                </Text>
              </Flex>
              <IconBox h={'45px'} w={'45px'} bg={iconBoxInside}>
                <Icon
                  as={BsBatteryCharging}
                  h={'24px'}
                  w={'24px'}
                  color={iconBlue}
                />
              </IconBox>
            </Flex>
          </Card>
          <Card bg={bgCard}>
            <Flex justify='space-between' w='100%' align='center'>
              <Flex direction='column'>
                <Text fontSize='sm' color='#fff' fontWeight='normal' mb='2px'>
                  Music Volume
                </Text>
                <Text fontSize='lg' color='#fff' fontWeight='bold'>
                  15/100
                </Text>
              </Flex>
              <IconBox h={'45px'} w={'45px'} bg={iconBoxInside}>
                <Icon
                  as={BsMusicNoteBeamed}
                  h={'24px'}
                  w={'24px'}
                  color={iconBlue}
                />
              </IconBox>
            </Flex>
          </Card>
        </Stack>
        <Card px='0px' maxH='230px' pb='0px'>
          <CardHeader px='22px'>
            <Stat me='auto'>
              <StatLabel fontSize='xs' color='gray.400' fontWeight='normal'>
                Income
              </StatLabel>
              <Flex>
                <StatNumber fontSize='lg' color={textColor}>
                  $130,912
                </StatNumber>
                <StatHelpText
                  alignSelf='flex-end'
                  justifySelf='flex-end'
                  m='0px'
                  ps='4px'
                  color='green.400'
                  fontWeight='bold'
                  fontSize='sm'
                >
                  +90%
                </StatHelpText>
              </Flex>
            </Stat>
          </CardHeader>

          <Box w='100%'>
            <LineChart
              chartData={lineChartDataWidgets1}
              chartOptions={lineChartOptionsWidgets1}
            />
          </Box>
        </Card>
        <Card
          px='0px'
          maxH='230px'
          pb='0px'
          gridColumn={{ md: '1 / 3', lg: 'auto' }}
        >
          <CardHeader px='22px'>
            <Flex justify='space-between' w='100%'>
              <Flex align='center'>
                <IconBox h={'45px'} w={'45px'} bg='blue.500' me='16px'>
                  <Icon
                    as={FaCheckCircle}
                    h={'24px'}
                    w={'24px'}
                    color='white'
                  />
                </IconBox>
                <Flex direction='column'>
                  <Text color='gray.400' fontSize='xs' fontWeight='normal'>
                    Tasks
                  </Text>
                  <Text color={textColor} fontSize='lg' fontWeight='bold'>
                    480
                  </Text>
                </Flex>
              </Flex>
              <Flex direction='column' minW='125px' alignSelf='flex-end'>
                <Text color='gray.400' fontWeight='normal' fontSize='xs'>
                  60%
                </Text>
                <Progress
                  colorScheme='blue'
                  borderRadius='15px'
                  h='6px'
                  value={60}
                />
              </Flex>
            </Flex>
          </CardHeader>

          <Box w='100%'>
            <LineChart
              chartData={lineChartDataWidgets2}
              chartOptions={lineChartOptionsWidgets2}
            />
          </Box>
        </Card>
      </Grid>
      <Grid
        templateColumns={{
          sm: '1fr',
          md: 'repeat(2, 1fr)',
          lg: 'repeat(3, 1fr)',
        }}
        gap='24px'
        mb='24px'
      >
        <Card>
          <CardHeader mb='16px'>
            <Flex direction='column'>
              <Text color={textColor} fontSize='lg' fontWeight='bold' mb='4px'>
                Upcoming events
              </Text>
              <Text color='gray.400' fontSize='sm' fontWeight='bold'>
                Joined
              </Text>
            </Flex>
          </CardHeader>

          <Flex direction='column'>
            <Flex align='center' mb='22px'>
              <IconBox h={'45px'} w={'45px'} bg={secondaryIconBlue} me='16px'>
                <Icon as={WalletIcon} h={'24px'} w={'24px'} color={iconBlue} />
              </IconBox>
              <Flex direction='column'>
                <Text color={textColor} fontSize='sm' fontWeight='bold'>
                  Cyber Week
                </Text>
                <Text color='gray.400' fontSize='sm' fontWeight='normal'>
                  27 March 2020, at 12:30 PM
                </Text>
              </Flex>
            </Flex>
            <Flex align='center'>
              <IconBox h={'45px'} w={'45px'} bg={secondaryIconBlue} me='16px'>
                <Icon as={ClockIcon} h={'24px'} w={'24px'} color={iconBlue} />
              </IconBox>
              <Flex direction='column'>
                <Text color={textColor} fontSize='sm' fontWeight='bold'>
                  Meeting with Marry
                </Text>
                <Text color='gray.400' fontSize='sm' fontWeight='normal'>
                  24 March 2020, at 10:00 PM
                </Text>
              </Flex>
            </Flex>
          </Flex>
        </Card>
        <Stack direction={{ sm: 'column', md: 'row' }} spacing='24px'>
          <Card p='16px' display='flex' align='center' justify='center'>
            <Flex direction='column' align='center' w='100%' py='14px'>
              <IconBox h={'60px'} w={'60px'} bg='blue.500'>
                <Icon h={'24px'} w={'24px'} color='white' as={FaWallet} />
              </IconBox>
              <Flex
                direction='column'
                m='14px'
                justify='center'
                textAlign='center'
                align='center'
                w='100%'
              >
                <Text fontSize='lg' color={textColor} fontWeight='bold'>
                  Salary
                </Text>
                <Text
                  mb='24px'
                  fontSize='xs'
                  color='gray.400'
                  fontWeight='semibold'
                >
                  Belong Interactive
                </Text>
                <HSeparator />
              </Flex>
              <Text fontSize='lg' color={textColor} fontWeight='bold'>
                +$2000
              </Text>
            </Flex>
          </Card>
          <Card p='16px' display='flex' align='center' justify='center'>
            <Flex
              direction='column'
              align='center'
              justify='center'
              w='100%'
              py='14px'
            >
              <IconBox h={'60px'} w={'60px'} bg='blue.500'>
                <Icon h={'24px'} w={'24px'} color='white' as={FaPaypal} />
              </IconBox>
              <Flex
                direction='column'
                m='14px'
                justify='center'
                textAlign='center'
                align='center'
                w='100%'
              >
                <Text fontSize='lg' color={textColor} fontWeight='bold'>
                  Paypal
                </Text>
                <Text
                  mb='24px'
                  fontSize='xs'
                  color='gray.400'
                  fontWeight='semibold'
                >
                  Freelance Payment
                </Text>
                <HSeparator />
              </Flex>
              <Text fontSize='lg' color={textColor} fontWeight='bold'>
                $455.00
              </Text>
            </Flex>
          </Card>
        </Stack>
        <Card
          backgroundImage={
            colorMode === 'light'
              ? BackgroundCard1
              : 'linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
          }
          backgroundRepeat='no-repeat'
          background='cover'
          bgPosition='10%'
          p='16px'
          h={{ sm: '220px', xl: '100%' }}
          gridColumn={{ md: '1 / 3', lg: 'auto' }}
        >
          <Flex
            direction='column'
            color='white'
            h='100%'
            p='0px 10px 20px 10px'
            w='100%'
          >
            <Flex justify='space-between' align='center'>
              <Text fontWeight='bold'>Argon x Chakra UI</Text>
              <Icon as={RiMastercardFill} w='48px' h='auto' color='gray.400' />
            </Flex>
            <Spacer />
            <Flex direction='column'>
              <Box>
                <Text fontSize='xl' letterSpacing='2px' fontWeight='bold'>
                  7812 2139 0823 XXXX
                </Text>
              </Box>
              <Flex mt='14px'>
                <Flex direction='column' me='34px'>
                  <Text fontSize='xs'>VALID THRU</Text>
                  <Text fontSize='xs' fontWeight='bold'>
                    05/24
                  </Text>
                </Flex>
                <Flex direction='column'>
                  <Text fontSize='xs'>CVV</Text>
                  <Text fontSize='xs' fontWeight='bold'>
                    09X
                  </Text>
                </Flex>
              </Flex>
            </Flex>
          </Flex>
        </Card>
      </Grid>
      <Grid
        templateColumns={{
          sm: '1fr',
          md: '1fr 1fr',
          lg: '1.5fr 1fr 1.2fr 1fr 1fr',
        }}
        gap='24px'
        mb='24px'
      >
        <Card>
          <CardHeader mb='24px'>
            <Flex justify='space-between' w='100%' align='center'>
              <Text color={textColor} fontWeight='bold' fontSize='lg'>
                Full Body
              </Text>
              <Badge
                bg={colorMode === 'light' ? 'red.100' : 'red.500'}
                color={colorMode === 'light' ? 'red.500' : 'white'}
                w='85px'
                py='6px'
                borderRadius='12px'
                textAlign='center'
              >
                MODERATE
              </Badge>
            </Flex>
          </CardHeader>

          <Text color='gray.400' fontWeight='normal' fontSize='sm'>
            What matters is the people who are sparked by it. And the people who
            are liked.
          </Text>
        </Card>
        <Card>
          <CardHeader mb='22px'>
            <Flex justify='space-between' align='center' w='100%'>
              <Text fontSize='xs' color='gray.400' fontWeight='bold'>
                {toggleSwitch ? 'ON' : 'OFF'}
              </Text>
              <Switch
                colorScheme='blue'
                onChange={() => setToggleSwitch(!toggleSwitch)}
              />
            </Flex>
          </CardHeader>

          <Flex direction='column'>
            <Icon
              as={toggleSwitch ? FaLightbulb : FaRegLightbulb}
              w='52px'
              h='52px'
              color='gray.400'
              mb='16px'
            />
            <Text color={textColor} fontWeight='bold'>
              Lights
            </Text>
          </Flex>
        </Card>
        <Card px='0px' pb='0px' gridColumn={{ md: '1 / 3', lg: 'auto' }}>
          <CardHeader px='22px'>
            <Stat me='auto'>
              <StatLabel fontSize='xs' color='gray.400' fontWeight='normal'>
                Calories
              </StatLabel>
              <Flex>
                <StatNumber fontSize='lg' color={textColor}>
                  187
                </StatNumber>
                <StatHelpText
                  alignSelf='flex-end'
                  justifySelf='flex-end'
                  m='0px'
                  ps='4px'
                  color='green.400'
                  fontWeight='bold'
                  fontSize='sm'
                >
                  +5%
                </StatHelpText>
              </Flex>
            </Stat>
          </CardHeader>

          <Box w='100%' maxH='100px'>
            <LineChart
              chartData={lineChartDataWidgets3}
              chartOptions={lineChartOptionsWidgets3}
            />
          </Box>
        </Card>
        <Card>
          <Flex direction='column'>
            <IconBox h={'45px'} w={'45px'} bg='blue.500' mb='24px'>
              <Icon as={FaShare} h={'24px'} w={'24px'} color='white' />
            </IconBox>
            <Flex direction='column'>
              <Text color={textColor} fontSize='2xl' fontWeight='bold'>
                754
                <Text as='span' color='gray.400' fontSize='sm' ms='2px'>
                  m
                </Text>
              </Text>
              <Text fontSize='sm' color='gray.400' fontWeight='normal'>
                New York City
              </Text>
            </Flex>
          </Flex>
        </Card>
        <Card>
          <CardHeader mb='42px'>
            <Text color='gray.400' fontSize='xs' fontWeight='normal'>
              STEPS
            </Text>
          </CardHeader>

          <Stat>
            <StatNumber
              color={textColor}
              fontWeight='bold'
              fontSize='2xl'
              mb='6px'
            >
              11.4K
            </StatNumber>
            <StatHelpText
              bg='green.100'
              color='green'
              w='fit-content'
              borderRadius='12px'
              fontSize='10px'
              p='6px 12px'
            >
              +4.3%
            </StatHelpText>
          </Stat>
        </Card>
      </Grid>
      <Grid templateColumns={{ sm: '1fr', lg: '1fr .5fr .7fr' }} gap='24px'>
        <Card minH='550px'>
          <CardHeader mb='6px'>
            <Flex direction='column'>
              <Text color={textColor} fontSize='lg' fontWeight='bold' mb='6px'>
                Calendar
              </Text>
              <Text color='gray.400' fontSize='sm' fontWeight='normal'>
                Wednesday, 2022
              </Text>
            </Flex>
          </CardHeader>
          <Box position='relative' display='block' height='100%'>
            <EventCalendar
              initialDate='2022-10-01'
              calendarData={calendarDataWidgets}
            />
          </Box>
        </Card>
        <Stack direction='column' spacing='24px'>
          <Card>
            <Text fontSize='lg' text={textColor} fontWeight='bold'>
              Categories
            </Text>

            <Stack direction='column' spacing='24px' w='100%' pt='28px'>
              <Flex align='center' w='100%'>
                <Flex align='center'>
                  <IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
                    <RocketIcon h={'20px'} w={'20px'} color='white' />
                  </IconBox>
                  <Flex direction='column'>
                    <Text fontSize='sm' fontWeight='bold' color={textColor}>
                      Devices
                    </Text>
                    <Text color='gray.400' fontSize='xs'>
                      250 in stock,{' '}
                      <Text as='span' fontWeight='bold'>
                        346+ sold
                      </Text>
                    </Text>
                  </Flex>
                </Flex>
                <Spacer />
                <Button variant='no-effects' px='0px'>
                  <Icon
                    as={RiArrowDropRightLine}
                    color='gray.400'
                    w='30px'
                    h='30px'
                    cursor='pointer'
                    transition='all .25s ease'
                    _hover={{ transform: 'translateX(25%)' }}
                  />
                </Button>
              </Flex>
              <Flex align='center' w='100%'>
                <Flex align='center'>
                  <IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
                    <SettingsIcon h={'20px'} w={'20px'} color='white' />
                  </IconBox>
                  <Flex direction='column'>
                    <Text fontSize='sm' fontWeight='bold' color={textColor}>
                      Tickets
                    </Text>
                    <Text color='gray.400' fontSize='xs'>
                      123 closed,{' '}
                      <Text as='span' fontWeight='bold'>
                        15 open
                      </Text>
                    </Text>
                  </Flex>
                </Flex>
                <Spacer />
                <Button variant='no-effects' px='0px'>
                  <Icon
                    as={RiArrowDropRightLine}
                    color='gray.400'
                    w='30px'
                    h='30px'
                    cursor='pointer'
                    transition='all .25s ease'
                    _hover={{ transform: 'translateX(25%)' }}
                  />
                </Button>
              </Flex>
              <Flex align='center' w='100%'>
                <Flex align='center'>
                  <IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
                    <DocumentIcon h={'20px'} w={'20px'} color='white' />
                  </IconBox>
                  <Flex direction='column'>
                    <Text fontSize='sm' fontWeight='bold' color={textColor}>
                      Error logs
                    </Text>
                    <Text color='gray.400' fontSize='xs'>
                      1 is active,{' '}
                      <Text as='span' fontWeight='bold'>
                        40 closed
                      </Text>
                    </Text>
                  </Flex>
                </Flex>
                <Spacer />
                <Button variant='no-effects' px='0px'>
                  <Icon
                    as={RiArrowDropRightLine}
                    color='gray.400'
                    w='30px'
                    h='30px'
                    cursor='pointer'
                    transition='all .25s ease'
                    _hover={{ transform: 'translateX(25%)' }}
                  />
                </Button>
              </Flex>
              <Flex align='center' w='100%'>
                <Flex align='center'>
                  <IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
                    <Icon as={FaUser} h={'20px'} w={'20px'} color='white' />
                  </IconBox>
                  <Flex direction='column'>
                    <Text fontSize='sm' fontWeight='bold' color={textColor}>
                      Happy Users
                    </Text>
                    <Text color='gray.400' fontSize='xs'>
                      <Text as='span' fontWeight='bold'>
                        +430
                      </Text>
                    </Text>
                  </Flex>
                </Flex>
                <Spacer />
                <Button variant='no-effects' px='0px'>
                  <Icon
                    as={RiArrowDropRightLine}
                    color='gray.400'
                    w='30px'
                    h='30px'
                    cursor='pointer'
                    transition='all .25s ease'
                    _hover={{ transform: 'translateX(25%)' }}
                  />
                </Button>
              </Flex>
            </Stack>
          </Card>
          <Card
            bgImage={colorMode === 'light' ? BgMusicCard : BgMusicCardDark}
            bgRepeat='no-repeat'
          >
            <Flex direction='column' w='100%' mb='60px'>
              <Text color='#fff' fontWeight='bold' fontSize='lg'>
                Some Kind of Blues
              </Text>
              <Text color='#fff' fontWeight='normal' fontSize='sm'>
                Deftones
              </Text>
            </Flex>

            <Stack direction='row' spacing='18px'>
              <Button
                variant='outline'
                colorScheme='whiteAlpha'
                borderRadius='50px'
                w='45px'
                h='45px'
              >
                <Icon as={AiFillBackward} color='#fff' w='26px' h='26px' />
              </Button>
              <Button
                variant='outline'
                colorScheme='whiteAlpha'
                borderRadius='50px'
                w='45px'
                h='45px'
              >
                <Icon as={FaPlay} color='#fff' w='18px' h='18px' />
              </Button>
              <Button
                variant='outline'
                colorScheme='whiteAlpha'
                borderRadius='50px'
                w='45px'
                h='45px'
              >
                <Icon as={AiFillForward} color='#fff' w='26px' h='26px' />
              </Button>
            </Stack>
          </Card>
        </Stack>
        <Card pb='0px'>
          <CardHeader mb='34px'>
            <Flex direction='column'>
              <Text
                fontSize='lg'
                color={textColor}
                fontWeight='bold'
                pb='.5rem'
              >
                Orders overview
              </Text>
              <Text fontSize='sm' color='gray.400' fontWeight='normal'>
                <Text fontWeight='bold' as='span' color='green.500'>
                  +30%
                </Text>{' '}
                this month.
              </Text>
            </Flex>
          </CardHeader>
          <Flex direction='column' ms='8px' position='relative'>
            {timelineData.map((row, index, arr) => {
              return (
                <TimelineRow
                  logo={row.logo}
                  title={row.title}
                  date={row.date}
                  color={row.color}
                  index={index}
                  arrLength={arr.length}
                  key={index}
                />
              );
            })}
          </Flex>
        </Card>
      </Grid>
    </Flex>
  );
}

export default Widgets;