---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import CaptureScript from '@shared/components/CaptureScript.astro'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Progress from '@ui/Progress.astro'
import ProgressSteps from '@ui/ProgressSteps.astro'
import ProgressBg from '@ui/ProgressBg.astro'
import ProgressDescription from '@ui/ProgressDescription.astro'
import DocsLink from '@ui/DocsLink.astro'
---

<DefaultLayout title="Progress" pageMenu="base.progress">
  <DocsLink slot="page-header-actions" path="/ui/components/progress" />
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle>Default</CardTitle>
          <CardSubtitle>Track completion with a simple bar from empty to full.</CardSubtitle>
          <div class="space-y">
            <Progress value={0} />
            <Progress value={20} />
            <Progress value={40} />
            <Progress value={100} />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle>With value</CardTitle>
          <CardSubtitle>Show the exact percentage as the <code>progress-bar</code> text inside a larger bar.</CardSubtitle>
          <div class="space-y">
            <Progress value={10} showValue size="lg" />
            <Progress value={20} showValue size="lg" />
            <Progress value={90} showValue size="lg" />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle>Colors</CardTitle>
          <CardSubtitle>Match the bar color to the context with any theme color.</CardSubtitle>
          <div class="space-y">
            <Progress color="blue" value={20} />
            <Progress color="green" value={40} />
            <Progress color="yellow" value={60} />
            <Progress color="red" value={80} />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle>Sizes</CardTitle>
          <CardSubtitle>Scale a bar from <code>progress-sm</code> to <code>progress-xl</code>.</CardSubtitle>
          <div class="space-y">
            <Progress value={20} size="sm" />
            <Progress value={40} />
            <Progress value={60} size="lg" />
            <Progress value={80} size="xl" />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle>Indeterminate</CardTitle>
          <CardSubtitle>Animate a bar with no known end point with <code>progress-bar-indeterminate</code>.</CardSubtitle>
          <div class="space-y">
            <Progress indeterminate />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle>Multiple values</CardTitle>
          <CardSubtitle>Stack several segments in one bar to compare parts of a whole.</CardSubtitle>
          <div class="space-y">
            <Progress values={[20, 30, 10]} colors={['blue', 'red', 'green']} />
            <Progress values={[10, 20, 30, 40]} colors={['blue', 'red', 'green', 'yellow']} class="progress-separated" />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle>Striped</CardTitle>
          <CardSubtitle>Add diagonal stripes with <code>progress-bar-striped</code> for a textured look.</CardSubtitle>
          <div class="space-y">
            <Progress color="blue" value={20} striped />
            <Progress color="green" value={40} striped />
            <Progress color="yellow" value={60} striped />
            <Progress color="red" value={80} striped />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle>Animated</CardTitle>
          <CardSubtitle>Combine <code>progress-bar-striped</code> with <code>progress-bar-animated</code> to keep the stripes moving.</CardSubtitle>
          <div class="space-y">
            <Progress value={20} striped animated />
            <Progress value={40} color="green" striped animated />
            <Progress value={60} color="yellow" striped animated />
            <Progress value={80} color="red" striped animated />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle> Animated with JavaScript </CardTitle>
          <CardSubtitle>Update the bar's width at runtime and watch it react.</CardSubtitle>
          <div class="row align-items-center g-0">
            <div class="col">
              <Progress value={0} id="progress-animated" />
            </div>
            <div class="col-2 text-end" id="progress-animated-value">0%</div>
          </div>
          <ButtonList class="mt-3">
            <button class="btn btn-sm" id="progress-animated-0">0%</button>
            <button class="btn btn-sm" id="progress-animated-10">10%</button>
            <button class="btn btn-sm" id="progress-animated-50">50%</button>
            <button class="btn btn-sm" id="progress-animated-100">100%</button>
            <button class="btn btn-sm ms-3" id="progress-animated-minus-10">-10%</button>
            <button class="btn btn-sm" id="progress-animated-add-10">+10%</button>
          </ButtonList>
          <CaptureScript>
            <!-- BEGIN SCRIPT OF ANIMATION -->
            <script is:inline>
              /*
						This script is for animation of the last progress bar.
						It increases the progress bar value by a random amount every 2 seconds until it reaches 100%.
						When it reaches 100%, it changes the color to green and stops the animation.

						This is just a demo script to show how to animate the progress bar. You can modify it as needed.
						*/
              const progress = document.getElementById('progress-animated')
              let width = 0

              const setWidth = (w) => {
                width = Math.min(Math.max(w, 0), 100)

                const bar = progress.querySelector('.progress-bar')
                bar.style.width = `${width}%`
                bar.setAttribute('aria-valuenow', `${width}`)
                document.getElementById('progress-animated-value').innerText = `${width}%`
                bar.classList.toggle('bg-green', width >= 100)
              }

              const interval = setInterval(() => {
                setWidth(width + Math.ceil(Math.random() * 10))
                if (width >= 100) clearInterval(interval)
              }, 2000)

              document.getElementById('progress-animated-0').addEventListener('click', () => setWidth(0))
              document.getElementById('progress-animated-10').addEventListener('click', () => setWidth(10))
              document.getElementById('progress-animated-50').addEventListener('click', () => setWidth(50))
              document.getElementById('progress-animated-add-10').addEventListener('click', () => setWidth(width + 10))
              document.getElementById('progress-animated-minus-10').addEventListener('click', () => setWidth(width - 10))
              document.getElementById('progress-animated-100').addEventListener('click', () => setWidth(100))
            </script>
            <!-- END SCRIPT OF ANIMATION -->
          </CaptureScript>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle> Steps Progress </CardTitle>
          <CardSubtitle>Mark discrete steps instead of a continuous percentage.</CardSubtitle>
          <div class="space-y">
            <ProgressSteps count={3} />
            <ProgressSteps count={5} active={4} />
            <ProgressSteps count={10} color="red" />
            <ProgressSteps count={8} color="green" active={8} />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle> Progress Background </CardTitle>
          <CardSubtitle>Fill a row's background as the progress indicator itself.</CardSubtitle>
          <div class="space-y">
            <ProgressBg value={85} text="Poland" showValue />
            <ProgressBg value={65} text="Germany" showValue />
            <ProgressBg value={45} text="United States" showValue />
            <ProgressBg value={25} text="France" showValue />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle> Progress Background Colors </CardTitle>
          <CardSubtitle>Pair a light background fill with a matching accent color.</CardSubtitle>
          <div class="space-y">
            <ProgressBg value={75} text="Success" color="success" showValue />
            <ProgressBg value={60} text="Warning" color="warning" showValue />
            <ProgressBg value={40} text="Danger" color="danger" showValue />
            <ProgressBg value={90} text="Info" color="info" showValue />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle> Progress Description </CardTitle>
          <CardSubtitle>Pair a label and percentage with the bar for more context.</CardSubtitle>
          <div class="space-y">
            <ProgressDescription label="Project completion" value={85} color="green" />
            <ProgressDescription label="Storage usage" description="2.4GB of 5GB" value={48} color="blue" />
            <ProgressDescription label="Download progress" value={75} color="yellow" />
            <ProgressDescription label="Skills assessment" description="HTML/CSS" value={92} color="red" />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col">
      <Card>
        <CardBody>
          <CardTitle> Progress Description Sizes </CardTitle>
          <CardSubtitle>Scale the labeled progress bar from <code>progress-sm</code> to <code>progress-xl</code>.</CardSubtitle>
          <div class="space-y">
            <ProgressDescription label="Small progress" value={60} size="sm" color="blue" />
            <ProgressDescription label="Default progress" value={70} color="green" />
            <ProgressDescription label="Large progress" value={80} size="lg" color="orange" />
            <ProgressDescription label="Extra large" value={90} size="xl" color="purple" />
          </div>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>