import React from 'react'
import { View, useWindowDimensions } from 'react-native'

import { TextStyles } from '../Styles'
import { Bone } from './Bone'

const DspSelectorBone: React.FC<{ width: number }> = ({ width }) => (
  <Bone
    style={{
      width: width - 40,
      height: 32,
      marginBottom: 15,
    }}
  />
)

export const CountrySkeleton: React.FC = () => {
  const { width } = useWindowDimensions()
  return (
    <View style={{ flex: 1 }}>
      <DspSelectorBone width={width} />
      <Bone
        style={{
          width: width - 40,
          height: 20,
          marginVertical: 8,
        }}
      />
      <Bone
        style={{
          width: width / 2,
          height: 60,
          marginVertical: 8,
        }}
      />
    </View>
  )
}

export const ArtistStreamsSkeleton: React.FC = () => (
  <View style={{ flex: 1 }}>
    <Bone
      style={{
        width: '60%',
        height: TextStyles.body.fontSize,
        marginVertical: 4,
      }}
    />
  </View>
)

const trackListImageSize = 64
export const TrackListSkeleton: React.FC<{
  numItems: number
  dspFilter?: boolean
}> = ({ numItems, dspFilter }) => {
  const { width } = useWindowDimensions()
  return (
    <>
      {dspFilter && <DspSelectorBone width={width} />}

      {[...Array(numItems)].map((_, i) => (
        <View style={{ flexDirection: 'row' }} key={i}>
          <View style={{ flexDirection: 'row' }}>
            <Bone
              style={{
                width: trackListImageSize,
                height: trackListImageSize,
                marginRight: 16,
                marginVertical: 15,
              }}
            />
          </View>
          <View
            style={{
              flex: 1,
              flexDirection: 'column',
              justifyContent: 'space-around',
              marginVertical: 15,
              height: trackListImageSize,
            }}
          >
            <Bone style={{ width: 120, height: 24 }} />
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <Bone style={{ width: 100, height: 15 }} />
              <Bone style={{ width: 80, height: 15 }} />
            </View>
          </View>
        </View>
      ))}
    </>
  )
}

export const DemographicCountrySkeleton: React.FC<{ numItems: number }> = ({
  numItems,
}) => {
  const { width } = useWindowDimensions()
  const marginLeft = 16

  return (
    <>
      {[...Array(numItems)].map((_, i) => (
        <View key={i} style={{ marginVertical: 18 }}>
          <Bone
            style={{
              width: Math.max(0.2, Math.random()) * (width - 40),
              height: 26,
              marginVertical: 8,
            }}
          />
          <Bone
            style={{
              width: width - 40 - marginLeft,
              height: 18,
              marginLeft,
            }}
          />
        </View>
      ))}
    </>
  )
}