import React from 'react'
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'

export const HeadLoading = () => {
  return (
    <div  style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 20px', height: 40}}>
    <SkeletonTheme baseColor="#ebebeb" highlightColor="#f5f5f5">
      <Skeleton count={1} width={60} height={18} inline={true}/>
      <span style={{display: 'flex'}}>
        <span style={{marginRight: 20}}>
          <Skeleton count={1} width={18} height={18} inline={true} style={{marginRight: 5}}/>
          <Skeleton count={1} width={60} height={18} inline={true}/>
        </span>
        <span style={{}}>
          <Skeleton count={1} width={18} height={18} inline={true} style={{marginRight: 5}}/>
          <Skeleton count={1} width={60} height={18} inline={true}/>
        </span>
      </span>
    </SkeletonTheme>
    </div>
  )
}

interface CardLoadingProps{
  horizontal: boolean
}

export const CardLoading = ({horizontal}: CardLoadingProps) => {
  return (
    <div style={{paddingBottom: 10}}>
      <SkeletonTheme baseColor="#ebebeb" highlightColor="#f5f5f5">
        <Skeleton count={1} height={20} style={{margin: '10px 0 10px 0'}}/>

        <div style={{display: 'flex', marginTop: 10}}>
          {
            horizontal? (
              [1, 2, 3, 4].map(v=>{
                return (
                  <div style={{display: 'flex', marginRight: 20}} key={v}>
                    <Skeleton count={1} width={30} height={30} inline={true} circle/>
                    <span style={{display: 'flex', flexDirection: 'column', marginLeft: 10}}>
                      <Skeleton count={1} width={60} height={13} inline={true}/>
                      <Skeleton count={1} width={33} height={13} inline={true}/>
                    </span>
                  </div>
                )
              })
            ): (
              [1, 2].map(v=>{
                return (
                  <div style={{display: 'flex', flexDirection: 'column', flex: 1}} key={v}>
                    <div style={{display: 'flex', marginRight: 20, flex: 1, marginBottom: 10}}>
                      <Skeleton count={1} width={30} height={30} inline={true} circle/>
                      <span style={{display: 'flex', flexDirection: 'column', marginLeft: 10}}>
                        <Skeleton count={1} width={60} height={13} inline={true}/>
                        <Skeleton count={1} width={33} height={13} inline={true}/>
                      </span>
                    </div>
                    <div style={{display: 'flex', marginRight: 20, flex: 1}}>
                      <Skeleton count={1} width={30} height={30} inline={true} circle/>
                      <span style={{display: 'flex', flexDirection: 'column', marginLeft: 10}}>
                        <Skeleton count={1} width={60} height={13} inline={true}/>
                        <Skeleton count={1} width={33} height={13} inline={true}/>
                      </span>
                    </div>
                  </div>
                )
              })
            )
          }
        </div>
      </SkeletonTheme>
    </div>
  )
}

export const ContentLoading = () => {
  return (
    <div style={{paddingLeft: 20, paddingRight: 20, width: '100%', height: '100%', position: 'relative'}}>
      <SkeletonTheme baseColor="#ebebeb" highlightColor="#f5f5f5">
        <p>
          <Skeleton count={1} width={70} height={20} inline={true} style={{marginRight: 20}}/>
          <Skeleton count={1} width={70} height={20} inline={true} style={{marginRight: 20}}/>
          <Skeleton count={1} width={70} height={20} inline={true} style={{marginRight: 20}}/>
          <Skeleton count={1} width={70} height={20} inline={true}/>
        </p>
        <p style={{marginTop: 30, display: 'flex', flexDirection: 'column'}}>
          <Skeleton count={1} width={55} height={20} inline={true} style={{marginRight: 10, marginBottom: 5}}/>
          <Skeleton count={1} height={20}/>
        </p>
        <p style={{marginTop: 30, display: 'flex', flexDirection: 'column'}}>
          <Skeleton count={1} width={55} height={20} inline={true} style={{marginRight: 10, marginBottom: 5}}/>
          <Skeleton count={1} width={'40%'} height={20} inline={true}/>
        </p>

        <p style={{marginTop: 30, display: 'flex', flexDirection: 'column'}}>
          <Skeleton count={1} width={55} height={20} inline={true} style={{marginRight: 10, marginBottom: 5}}/>
          <Skeleton count={1} height={20}/>
        </p>
        <p style={{marginTop: 30, display: 'flex', flexDirection: 'column'}}>
          <Skeleton count={1} width={55} height={20} inline={true} style={{marginRight: 10, marginBottom: 5}}/>
          <Skeleton count={1} width={'40%'} height={20} inline={true}/>
        </p>
        
      </SkeletonTheme>
    </div>
  )
}