import React from 'react'
import { View } from 'react-native'
import { useValues } from '../../../../utils/context'
import { useTheme } from '@react-navigation/native'
import styles from './styles'
import ContentLoader, { Circle, Rect } from 'react-content-loader/native'
import appColors from '../../../../theme/appColors'
import { windowHeight, windowWidth } from '../../../settings/chat/context'

export function LoaderRide() {
  const { isDark } = useValues()
  const { colors } = useTheme()

  return (
    <View style={styles.container}>
      <View
        style={[
          styles.rideInfoContainer,
          {
            backgroundColor: isDark ? appColors.primaryFont : appColors.white,
            borderColor: isDark ? appColors.darkThemeSub : colors.border,
          },
        ]}
      >
        <ContentLoader
          speed={2}
          width={windowWidth(800)}
          height={windowHeight(500)}
          backgroundColor={
            isDark ? appColors.darkThemeSub : appColors.loaderBackground
          }
          foregroundColor={
            isDark ? appColors.bgDark : appColors.loaderLightHighlight
          }
          style={{ paddingHorizontal: windowWidth(25) }}
        >
          <Rect
            x={windowWidth(5)}
            y={windowHeight(5)}
            width={windowWidth(75)}
            height={windowHeight(50)}
          />
          <Rect
            x={windowWidth(105)}
            y={windowHeight(10)}
            width={windowWidth(140)}
            height={windowHeight(17)}
            rx={0}
          />
          <Rect
            x={windowWidth(240)}
            y={windowHeight(10)}
            width={windowWidth(55)}
            height={windowHeight(17)}
          />
          <Rect
            x={windowWidth(355)}
            y={windowHeight(10)}
            width={windowWidth(55)}
            height={windowHeight(17)}
          />
          <Rect
            x={windowWidth(105)}
            y={windowHeight(38)}
            width={windowWidth(310)}
            height={windowHeight(17)}
            rx={0}
          />

          <Rect
            x={windowWidth(0)}
            y={windowHeight(70)}
            width={windowWidth(420)}
            height={windowHeight(5)}
            rx={0}
          />
          <Circle
            cx={windowWidth(50)}
            cy={windowHeight(113)}
            r={windowWidth(40)}
          />
          <Rect
            x={windowWidth(105)}
            y={windowHeight(95)}
            width={windowWidth(200)}
            height={windowHeight(17)}
            rx={0}
          />
          <Rect
            x={windowWidth(345)}
            y={windowHeight(95)}
            width={windowWidth(65)}
            height={windowHeight(17)}
          />
          <Rect
            x={windowWidth(105)}
            y={windowHeight(118)}
            width={windowWidth(200)}
            height={windowHeight(17)}
            rx={0}
          />
          <Rect
            x={windowWidth(5)}
            y={windowHeight(148)}
            width={windowWidth(320)}
            height={windowHeight(20)}
            rx={0}
          />
          <Circle
            cx={windowWidth(378)}
            cy={windowHeight(158)}
            r={windowWidth(30)}
          />

          <Rect
            x={windowWidth(0)}
            y={windowHeight(190)}
            width={windowWidth(420)}
            height={windowHeight(5)}
            rx={0}
          />

          <Rect
            x={windowWidth(85)}
            y={windowHeight(220)}
            width={windowWidth(320)}
            height={windowHeight(20)}
            rx={0}
          />
          <Circle
            cx={windowWidth(45)}
            cy={windowHeight(230)}
            r={windowWidth(30)}
          />

          <Rect
            x={windowWidth(85)}
            y={windowHeight(270)}
            width={windowWidth(320)}
            height={windowHeight(20)}
            rx={0}
          />
          <Circle
            cx={windowWidth(45)}
            cy={windowHeight(280)}
            r={windowWidth(30)}
          />
        </ContentLoader>
      </View>
    </View>
  )
}
