import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';

const styles = css`
  ${componentStyles}

  :host {
    --size: 1em;
    --track-width: 0.15em;
    --track-color: var(--flow-ui-color-neutral-200);
    --indicator-width: var(--track-width);
    --indicator-color: var(--flow-ui-color-primary-500);
    --indicator-transition-duration: 0.35s;

    display: inline-flex;
  }

  .progress-ring {
    --indicator-width: var(--track-width);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  :host([size='small']) .progress-ring {
    --size: 1em;
    --track-width: 0.15em;
  }

  :host([size='medium']) .progress-ring {
    --size: 1.5em;
    --track-width: 0.15em;
  }

  :host([size='large']) .progress-ring {
    --size: 2.25em;
    --track-width: 0.15em;
  }

  :host([variant='primary']) .progress-ring {
    --indicator-color: var(--flow-ui-color-primary-500);
  }

  :host([variant='secondary']) .progress-ring {
    --indicator-color: var(--flow-ui-color-secondary-500);
  }

  :host([variant='success']) .progress-ring {
    --indicator-color: var(--flow-ui-color-success-500);
  }

  :host([variant='neutral']) .progress-ring {
    --indicator-color: var(--flow-ui-color-neutral-500);
  }

  :host([variant='warning']) .progress-ring {
    --indicator-color: var(--flow-ui-color-warning-500);
  }

  :host([variant='danger']) .progress-ring {
    --indicator-color: var(--flow-ui-color-danger-500);
  }

  .progress-ring__image {
    width: var(--size);
    height: var(--size);
    rotate: -90deg;
    transform-origin: 50% 50%;
  }

  .progress-ring__track,
  .progress-ring__indicator {
    --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
    --circumference: calc(var(--radius) * 2 * 3.141592654);

    fill: none;
    r: var(--radius);
    cx: calc(var(--size) / 2);
    cy: calc(var(--size) / 2);

    transform-origin: 50% 50%;
  }

  .progress-ring__track {
    stroke: var(--track-color);
    stroke-width: var(--track-width);
  }

  .progress-ring__indicator {
    stroke: var(--indicator-color);
    stroke-width: var(--indicator-width);
    stroke-linecap: round;
  }

  .progress-ring__indicator {
    --blank-ratio: calc(1 - var(--percentage) * 0.01);

    stroke-dasharray: calc(var(--circumference)) calc(var(--circumference));
    stroke-dashoffset: calc(var(--blank-ratio) * var(--circumference));
    transition-property: stroke-dashoffset;
    transition-duration: var(--indicator-transition-duration);
  }

  :host([indeterminate]) .progress-ring {
    --track-color: transparent;
  }

  :host([indeterminate]) .progress-ring__indicator {
    animation: indeterminate 2.5s infinite linear;
  }

  .progress-ring__label {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    user-select: none;
  }

  @keyframes indeterminate {
    0% {
      transform: rotate(0deg);
      stroke-dasharray: calc(var(--circumference) * 0) calc(var(--circumference) * 1);
    }

    50% {
      transform: rotate(450deg);
      stroke-dasharray: calc(var(--circumference) * 0.8) calc(var(--circumference) * 0.2);
    }

    100% {
      transform: rotate(1080deg);
      stroke-dasharray: calc(var(--circumference) * 0) calc(var(--circumference) * 1);
    }
  }
`;

export { styles as default };
