import { Chips, Flex, Heading, Paper, Text } from '@pillar-ui/core'
import { ArrowBarTop } from '@pillar-ui/icons'
import { formatPrice } from '@pillar-ui/utils'
import React from 'react'

export const StatFormat = () => {
  return (
    <Paper flow="3" p="4" width="fit-content">
      <Heading weight="4" color="b" low>
        Revenue
      </Heading>
      <div>
        <Flex gap="2" items="center">
          <Text weight="6" size="7">
            {formatPrice(250)}
          </Text>
          <Chips variant="soft" color="su">
            + 37.8%
          </Chips>
        </Flex>
        <Text size="3" color="b" low>
          Last month revenue is {formatPrice(182)}
        </Text>
      </div>
    </Paper>
  )
}

import { Chips, Flex, Heading, Paper, Text } from '@pillar-ui/core'
import { formatPrice } from '@pillar-ui/utils'
import React from 'react'

export const StatFormatArabic = () => {
  return (
    <Paper dir="rtl" p="4" width="fit-content">
      <Heading weight="4" color="b" low size="4">
        الإيرادات
      </Heading>
      <Flex gap="2" items="center">
        <Text leading="2" weight="6" size="7">
          {formatPrice(250, 'ar-ma', 'MAD')}
        </Text>
        <Chips variant="soft" color="su">
          + 37.8%
        </Chips>
      </Flex>
    </Paper>
  )
}

'use client'
import { useState, useEffect, useCallback, useRef } from 'react'
import { Flex, Paper, Text, Button, Chips } from '@pillar-ui/core'
import { PlayerPause, PlayerPlay, Repeat } from '@pillar-ui/icons'

const useCountdown = (initialTime: number = 100) => {
  initialTime = Math.max(0, initialTime)
  const [time, setTime] = useState(initialTime)
  const [isActive, setIsActive] = useState(true)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)

  const clearCurrentInterval = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current)
      intervalRef.current = null
    }
  }

  const startCountdown = useCallback(() => {
    clearCurrentInterval()
    setIsActive(true)

    intervalRef.current = setInterval(() => {
      setTime((time) => {
        if (time === 0) {
          clearCurrentInterval()
          setIsActive(false)
          return 0
        }
        return time - 1
      })
    }, 1000)
  }, [])

  const pause = useCallback(() => {
    clearCurrentInterval()
    setIsActive(false)
  }, [])

  const reset = useCallback(() => {
    setTime(initialTime)
    startCountdown()
  }, [initialTime, startCountdown])

  const play = useCallback(() => {
    if (time === 0) {
      reset()
    } else {
      startCountdown()
    }
  }, [time, reset, startCountdown])

  useEffect(() => {
    startCountdown()
    return clearCurrentInterval
  }, [startCountdown])

  return {
    time,
    isActive,
    play,
    pause,
    reset,
  }
}

interface StatCountDownProps {
  initialTime?: number
  className?: string
}

function formatTimeMessage(time: number) {
  if (time === 0) return 'Time is up'
  return `${time} second${time > 1 ? 's' : ''}`
}
interface StatCountDownProps {
  initialTime?: number
}

export const StatCountDown = () => {
  const { time, isActive, play, pause, reset } = useCountdown()

  return (
    <Paper flow="6" p="4" width="fit-content">
      <Paper>
        <Text size="3" color="b" low>
          Countdown to time up 🎉
        </Text>
        <Flex gap="4" items="center">
          <Text transform="uppercase" weight="6" size="9" leading="2">
            {formatTimeMessage(time)}
          </Text>
          <Chips variant={isActive ? 'mixed' : 'shadow'} color={isActive ? 'd' : 'su'}>
            {isActive ? 'Played' : 'Paused'}
          </Chips>
        </Flex>
      </Paper>
      <Flex gap="3">
        <Button size="4" icon={isActive ? <PlayerPause /> : <PlayerPlay />} onClick={isActive ? pause : play}>
          {isActive ? 'Pause' : 'Play'}
        </Button>
        <Button icon={<Repeat />} size="4" variant="soft" onClick={reset}>
          Reset
        </Button>
      </Flex>
    </Paper>
  )
}

import { Flex, Paper, Text } from '@pillar-ui/core'
import { Clock } from '@pillar-ui/icons'
import { formatPrice } from '@pillar-ui/utils'
import React from 'react'

export const StatTime = () => {
  return (
    <Paper width="fit-content" background="B1" flow="3" p="5" border corner="3">
      <Flex justify="end">
        <Clock width={24} />
      </Flex>
      <div>
        <Text size="4" color="b" low>
          Total Work Time
        </Text>
        <Flex gap="2" items="end">
          <Text as="span" weight="5" size="6" leading="1">
            127
          </Text>
          <Text as="span" color="b" low weight="5" leading="1">
            H
          </Text>
          <Text as="span" weight="5" size="6" leading="1">
            35
          </Text>
          <Text as="span" color="b" low weight="5" leading="1">
            M
          </Text>
          <Text as="span" weight="5" size="6" leading="1">
            12
          </Text>
          <Text as="span" color="b" low weight="5" leading="1">
            S
          </Text>
        </Flex>
      </div>
    </Paper>
  )
}

import { Flex, Paper, Text, Button, Chips, Heading } from '@pillar-ui/core'
import { ArrowCircleDown, ArrowCircleTop, PlayerPause, PlayerPlay, Repeat } from '@pillar-ui/icons'
import { formatPrice } from '@pillar-ui/utils'

const STAT = {
  up: {
    icon: <ArrowCircleTop width="16" stroke="var(--Su11)" />,
    color: 'su',
    text: '+37.8%',
  },
  down: {
    icon: <ArrowCircleDown width="16" stroke="var(--D11)" />,
    color: 'd',
    text: '-37.8%',
  },
  flat: {
    icon: null,
    color: 'b',
    text: '0%',
  },
} as const

const StatItem = ({ stat = 'up' }: { stat?: 'up' | 'down' | 'flat' }) => {
  const SHIP = stat !== 'flat' && (
    <Chips variant="soft" color={STAT[stat].color}>
      {STAT[stat].text}
    </Chips>
  )
  return (
    <Paper justify="between" items="center" gap="3" as={Flex} background="B1" p="4" border corner="2">
      <Flex gap="2" items="center">
        <Text size="3" color="b" low>
          Last month revenue is {formatPrice(182)}
        </Text>
        {STAT[stat].icon}
      </Flex>
      <Flex gap="2" items="center">
        {SHIP}
        <Text weight="5" leading="1">
          {formatPrice(250)}
        </Text>
      </Flex>
    </Paper>
  )
}

export const StatFluid = () => {
  return (
    <Paper flow="6" p="4">
      <Heading weight="4" color="b" low>
        Revenue and growth stats
      </Heading>
      <Paper flow="5">
        <StatItem />
        <StatItem stat="down" />
        <StatItem stat="flat" />
      </Paper>
    </Paper>
  )
}

import { Chips, Flex, Grid, Heading, Paper, Text } from '@pillar-ui/core'
import { ArrowCircleDown, ArrowBarTop, ArrowCircleTop, Equal } from '@pillar-ui/icons'
import { formatPrice } from '@pillar-ui/utils'
import React from 'react'

const STAT = {
  up: {
    icon: <ArrowCircleTop width="16" stroke="var(--Su11)" />,
    color: 'su',
    text: '+37.8%',
  },
  down: {
    icon: <ArrowCircleDown width="16" stroke="var(--D11)" />,
    color: 'd',
    text: '-37.8%',
  },
  flat: {
    icon: null,
    color: 'b',
    text: '0%',
  },
} as const

const StatItem = ({ stat = 'up' }: { stat?: 'up' | 'down' | 'flat' }) => {
  return (
    <Paper background="B1" flow="3" p="4" border corner="2">
      <Text size="3" color="b" low>
        Last month revenue is {formatPrice(182)}
      </Text>
      <Flex gap="2" items="center">
        {STAT[stat].icon}
        <Text weight="5" size="7" leading="1">
          {formatPrice(250)}
        </Text>
        <Chips variant="soft" color={STAT[stat].color}>
          {STAT[stat].text}
        </Chips>
      </Flex>
    </Paper>
  )
}
export const StatList = () => {
  return (
    <Paper flow="6" p="4">
      <Heading weight="4" color="b" low>
        Revenue and growth stats
      </Heading>
      <Grid gap="4" cols={{ default: '1fr', md: '1fr 1fr 1fr' }}>
        <StatItem />
        <StatItem stat="down" />
        <StatItem stat="flat" />
      </Grid>
    </Paper>
  )
}