import styled from '@emotion/styled';
import { useEffect, useState } from 'react';

import Button, { ButtonShape } from '@/components/button/Button';

import { bigSpace } from './themes';

const Wrapper = styled.div`
  padding: ${bigSpace}px 16px;
  gap: 8px;
  background-color: var(--color-background-secondary);
  border-radius: 16px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
`;

const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
`;

const LoadingBarWrapper = styled.div`
  width: 100%;
  height: 8px;
  background-color: var(--color-background-glass-thick);
  border-radius: 4px;
  overflow: hidden;
`;

const LoadingBar = styled.div`
  height: 100%;
  min-width: 8px;
  background-color: var(--color-accent-brand);
  transition: width 1s linear;
  border-radius: 4px;
`;

export default function PreparingSelectionCard({
  dropTimestamp,
  onCancel,
}: {
  dropTimestamp: number;
  onCancel: () => void;
}) {
  const [barWidth, setBarWidth] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      const secondsElapsed = (Date.now() - dropTimestamp) / 1000;
      const progress = 1 - 1 / (1 + secondsElapsed / 10);
      setBarWidth(progress);
    }, 1000);
    return () => clearInterval(interval);
  }, [dropTimestamp]);
  return (
    <Wrapper>
      <Header>
        Preparing your audio selection...{' '}
        <Button
          shape={ButtonShape.Pill}
          aria-label='Cancel audio selection preparation'
          onClick={onCancel}
        >
          Cancel
        </Button>
      </Header>
      <LoadingBarWrapper>
        <LoadingBar style={{ width: barWidth * 100 + '%' }} />
      </LoadingBarWrapper>
    </Wrapper>
  );
}