import { GetUserQuery } from '@API'
import TranslatedText from '@components/TranslatedText'
import { WIDTH } from '@helpers/Dimensions'
import colors from '@styles/colors'
import React, { FC } from 'react'
import { AnimatedCircularProgress } from 'react-native-circular-progress'
import { Circle } from 'react-native-svg'
import styled from 'styled-components/native'

const chartWidth = WIDTH - 16 * 2 - 2 * 32

type User = Exclude<GetUserQuery['getUser'], null>
type SleepPoints = Exclude<User['sleepPoints'], null>

type Props = {
  sleepPoints?: SleepPoints | null
}

const Points: FC<Props> = ({
  sleepPoints = {
    efficiency: 0,
    duration: 0,
    socialJetLag: 0,
    timing: 0
  }
}) => {
  const average =
    ((sleepPoints?.efficiency ?? 0) +
      (sleepPoints?.duration ?? 0) +
      (sleepPoints?.socialJetLag ?? 0) +
      (sleepPoints?.timing ?? 0)) /
    4

  return (
    <Container>
      <ChartContainer>
        <Progress
          width={15}
          size={chartWidth}
          fill={average}
          renderCap={({ center }) => {
            return (
              <ThemedCircle
                x={center.x}
                y={center.y}
                r={10}
                strokeWidth={4}
                stroke={colors.darkBlue}
              />
            )
          }}
        />

        <PointsContainer>
          <TotalPoints>{average}</TotalPoints>
          <Title>POINTS.TITLE</Title>
        </PointsContainer>
      </ChartContainer>

      <Section>
        <ScoreContainer>
          <Score>{sleepPoints?.efficiency}</Score>
        </ScoreContainer>
        <Column>
          <ScoreTitle>POINTS.EFFICIENCY</ScoreTitle>
          <Explanation>POINTS.EFFICIENCY_EXPLANATION</Explanation>
        </Column>
      </Section>
      <Section>
        <ScoreContainer>
          <Score>{sleepPoints?.duration}</Score>
        </ScoreContainer>
        <Column>
          <ScoreTitle>POINTS.DURATION</ScoreTitle>
          <Explanation>POINTS.DURATION_EXPLANATION</Explanation>
        </Column>
      </Section>

      <Section>
        <ScoreContainer>
          <Score>{sleepPoints?.socialJetLag}</Score>
        </ScoreContainer>
        <Column>
          <ScoreTitle>POINTS.SOCIAL_JET_LAG</ScoreTitle>
          <Explanation>POINTS.SOCIAL_JET_LAG_EXPLANATION</Explanation>
        </Column>
      </Section>

      <Section>
        <ScoreContainer>
          <Score>{sleepPoints?.timing}</Score>
        </ScoreContainer>
        <Column>
          <ScoreTitle>POINTS.TIMING</ScoreTitle>
          <Explanation>POINTS.TIMING_EXPLANATION</Explanation>
        </Column>
      </Section>
    </Container>
  )
}

export default Points

const Container = styled.View`
  background-color: ${({ theme }) => theme.SECONDARY_BACKGROUND_COLOR};
  padding: 16px;
  box-shadow: ${({ theme }) => theme.SHADOW};
  border-radius: 7px;
  margin: 16px;
`

const ScoreTitle = styled(TranslatedText)`
  font-size: 15px;
  margin-bottom: 4px;
  font-family: ${({ theme }) => theme.FONT_BOLD};
  color: ${({ theme }) => theme.PRIMARY_TEXT_COLOR};
`

const Explanation = styled(TranslatedText)`
  font-size: 13px;
  font-family: ${({ theme }) => theme.FONT_MEDIUM};
  color: ${({ theme }) => theme.SECONDARY_TEXT_COLOR};
`

const Section = styled.View`
  flex-direction: row;
  border-top-width: 1px;
  border-top-color: ${({ theme }) => theme.HAIRLINE_COLOR};
  padding: 16px 0px;
  align-items: center;
`
const Column = styled.View`
  margin-left: 16px;
  flex: 1;
  width: 100%;
`

const Score = styled.Text`
  font-size: 25px;
  font-family: ${({ theme }) => theme.FONT_BOLD};
  color: ${({ theme }) => theme.SECONDARY_TEXT_COLOR};
`

const Title = styled(TranslatedText)`
  font-size: 22px;
  text-align: center;
  margin-bottom: 32px;
  font-family: ${({ theme }) => theme.FONT_BOLD};
  color: ${({ theme }) => theme.PRIMARY_TEXT_COLOR};
`

const PointsContainer = styled.View`
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
`
const TotalPoints = styled.Text`
  margin-bottom: 32px;
  font-size: 60px;
  text-align: center;
  font-family: ${({ theme }) => theme.FONT_BOLD};
  color: ${({ theme }) => theme.PRIMARY_TEXT_COLOR};
`

const ChartContainer = styled.View`
  align-items: center;
  justify-content: center;
  height: ${chartWidth}px;
`

const ThemedCircle = styled(Circle).attrs(({ theme }) => ({
  fill: theme.SECONDARY_BACKGROUND_COLOR
}))``

const ScoreContainer = styled.View``

const Progress = styled(AnimatedCircularProgress).attrs(({ theme }) => ({
  rotation: 250,
  arcSweepAngle: 225,
  tintColor: colors.darkBlue,
  backgroundColor: theme.PRIMARY_BACKGROUND_COLOR,
  lineCap: 'round'
}))`
  position: absolute;
`