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

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

export function RollingSquare(handle: Handle) {
  let toggled = false

  return () => (
    <div
      mix={[
        css({
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: '20px',
          minWidth: '300px',
        }),
      ]}
    >
      <div
        mix={[
          css({
            width: '80px',
            height: '80px',
            backgroundColor: '#8df0cc',
            borderRadius: '10px',
            transition: `transform ${spring({ duration: 500, bounce: 0.5 })}`,
          }),
        ]}
        style={{
          transform: toggled ? 'translateX(100%) rotate(180deg)' : 'translateX(-100%)',
        }}
      />
      <button
        mix={[
          css({
            backgroundColor: '#8df0cc',
            color: '#0f1115',
            borderRadius: '5px',
            padding: '10px',
            margin: '10px',
            border: 'none',
            cursor: 'pointer',
          }),
          on('click', () => {
            toggled = !toggled
            handle.update()
          }),
        ]}
      >
        Toggle position
      </button>
    </div>
  )
}