import { type Handle } from '@remix-run/ui'
import { css, on } from '@remix-run/ui'

import { spring } from '@remix-run/ui/animation'

export function AspectRatio(handle: Handle) {
  let aspectRatio = 1
  let width = 100

  return () => (
    <div
      mix={[
        css({
          display: 'flex',
          alignItems: 'center',
          flexDirection: 'column',
          gap: 20,
        }),
      ]}
    >
      <div
        mix={[
          css({
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            width: 180,
            height: 180,
          }),
        ]}
      >
        <div
          mix={[
            css({
              backgroundColor: '#8df0cc',
              borderRadius: 10,
              transition: spring.transition(['width', 'aspect-ratio'], 'bouncy'),
            }),
          ]}
          style={{
            width,
            aspectRatio,
          }}
        />
      </div>
      <div mix={[css({ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' })]}>
        <label
          mix={[
            css({
              display: 'flex',
              alignItems: 'center',
              gap: 10,
              fontSize: 13,
              color: '#666',
            }),
          ]}
        >
          <span mix={[css({ width: 50, flexShrink: 0 })]}>Ratio</span>
          <input
            type="range"
            value={aspectRatio}
            min={0.2}
            max={3}
            step={0.1}
            mix={[
              css(rangeInputCss),
              on('input', (event) => {
                let value = event.currentTarget.value

                aspectRatio = parseFloat(value)
                handle.update()
              }),
            ]}
          />
          <span mix={[css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })]}>
            {aspectRatio.toFixed(1)}
          </span>
        </label>
        <label
          mix={[
            css({
              display: 'flex',
              alignItems: 'center',
              gap: 10,
              fontSize: 13,
              color: '#666',
            }),
          ]}
        >
          <span mix={[css({ width: 50, flexShrink: 0 })]}>Width</span>
          <input
            type="range"
            value={width}
            min={20}
            max={160}
            step={5}
            mix={[
              css(rangeInputCss),
              on('input', (event) => {
                let value = event.currentTarget.value

                width = parseFloat(value)
                handle.update()
              }),
            ]}
          />
          <span mix={[css({ width: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' })]}>
            {width}
          </span>
        </label>
      </div>
    </div>
  )
}

const rangeInputCss = {
  flex: 1,
  accentColor: '#8df0cc',
  cursor: 'pointer',
} as const