import styled from 'styled-components'

import { data } from './dummyData'

import Heading from 'share-ui/components/Heading/Heading'
import Typography from 'share-ui/components/typography/Typography'

import { StyledTextWrapper } from '../Collection/CollectionForm/CollectionForm'

import { BarChart, Bar, XAxis, YAxis } from 'recharts'

import GetStartedComponent from './HomeComponents/GetStartedComponent'

import { StyleHeaderGroup, StyledInnerWrapper } from 'styles/globalStyle.css'
import { ReportsOverview } from './ReportsOverview/ReportsOverview'
import { StyledInnerWrapperEdit } from './homeStyle.css'

const Home = () => {
  return (
    <>
      <StyleHeaderGroup />

      <StyledInnerWrapperEdit>
        <StyledWelcomeContainer>
          <h1>Welcome, Eduardo!</h1>
          <p>
            Browse our <span>developers docs </span> or <span> explore all the ways</span> to start
            using L3AGI.
          </p>
        </StyledWelcomeContainer>
        <GetStartedComponent />

        <ReportsOverview />

        {/* <StyledInfoSection>
          <StyledGroupContainer>
            <StyledFlex>
              <StyledTypography>Get Started with</StyledTypography>
              <img src={l3Letters} alt='l3 letter' />
            </StyledFlex>
            <StyledCardWrapper>
              <StyledInfoCard>
                <StyledTypography size='18'>Collection</StyledTypography>
                <StyledInfoCardBody>
                  <StyleCardTagWrapperGroup>
                    <StyleTagLabel>Build with:</StyleTagLabel>
                    <StyleCardTagWrapper>
                      <Tags
                        label='API'
                        color='linear-gradient(180deg, #73FAFD 0%, #50B1D7 100%)'
                        readOnly
                        size='small'
                      />
                      <Tags label='No Code' color='gradient_orange' readOnly size='small' />
                    </StyleCardTagWrapper>
                  </StyleCardTagWrapperGroup>
                  <StyleImageContainer>
                    <img src={collectionBg} alt='' />
                  </StyleImageContainer>
                </StyledInfoCardBody>
              </StyledInfoCard>
              <StyledInfoCard>
                <StyledTypography size='18'>Contract</StyledTypography>
                <StyledInfoCardBody>
                  <StyleCardTagWrapperGroup>
                    <StyleTagLabel>Build with:</StyleTagLabel>
                    <StyleCardTagWrapper>
                      <Tags label='No Code' color='gradient_orange' readOnly size='small' />
                    </StyleCardTagWrapper>
                  </StyleCardTagWrapperGroup>
                  <StyleImageContainer>
                    <img src={contractBg} alt='' />
                  </StyleImageContainer>
                </StyledInfoCardBody>
              </StyledInfoCard>
            </StyledCardWrapper>
          </StyledGroupContainer>
        </StyledInfoSection> */}

        {/* 
          <StyledTextWrapper>
            <Heading
              type={Heading.types?.h1}
              value={'Reports Overview'}
              size='medium'
              customColor={'rgba(255, 255, 255, 0.8)'}
            />
          </StyledTextWrapper>
          */}
        {/* <StyledChartSection>
          <StyledBarChartWrapper>
            {renderBarChart('Gross Volume', { first: 'pv', second: 'uv', third: 'ad' }, 'name')}
            {renderBarChart('Net Volume', { first: 'pv', second: 'uv', third: 'ad' }, 'name')}
          </StyledBarChartWrapper>
        </StyledChartSection> */}
      </StyledInnerWrapperEdit>
    </>
  )
}

export default Home

const StyledChartSection = styled.div`
  /* width: 80%; */
  display: flex;
  flex-direction: column;
  gap: 20px;
`

const StyledBarChartWrapper = styled.div`
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 50px;
`

const StyledInfoSection = styled.div`
  padding: 30px 32px;
  background: rgba(0, 0, 0, 0.1);
  mix-blend-mode: normal;
  border-radius: 8px;

  min-width: fit-content;
`

const StyledTypography = styled.h1<{ size?: string }>`
  font-style: normal;
  font-weight: 500;
  font-size: ${p => (p.size ? p.size : '20')}px;
  line-height: normal;
  color: #ffffff;
`

const StyledFlex = styled.div`
  display: flex;
  align-items: end;
`

const StyledGroupContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 14px;
`

const StyledInfoCard = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
`

const StyledCardWrapper = styled.div`
  display: flex;
  gap: 32px;
`
const StyledInfoCardBody = styled.div`
  display: flex;
  flex-direction: column;
  gap: 6px;
`

const StyleCardTagWrapper = styled.div`
  display: flex;
  gap: 4px;
`
const StyleCardTagWrapperGroup = styled.div`
  display: flex;
  gap: 4px;
`

const StyleTagLabel = styled.p`
  font-style: normal;
  font-weight: 450;
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
`

const StyleImageContainer = styled.div`
  width: 100;
  width: 351px;
  height: 222px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  img {
    position: absolute;
    width: 100%;
    height: 100%;
  }
`

const StyledWelcomeContainer = styled.div`
  h1 {
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    color: #ffffff;
  }
  p {
    font-style: normal;
    font-weight: 450;
    font-size: 18px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 16px;
  }
  span {
    rgba(255, 255, 255, 1);
    text-decoration: underline;
  }
`
