import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';

import TimeReadout from '@/components/edit2025/TimeReadout';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import { PauseIcon, PlayIcon } from '@/icons';
import { SMALL_IMAGE } from '@/utils/constants';

import { bigButton, bigSpace, smallSpace } from './themes';

export const CardList = styled.div<{ active: boolean; nested?: boolean }>`
  display: flex;
  flex-direction: column;
  gap: ${(props) => bigSpace(props)}px;
  opacity: ${({ active }) => (active ? 1 : 0)};
  pointer-events: ${({ active }) => (active ? 'auto' : 'none')};
  position: absolute;
  z-index: ${({ active }) => (active ? 1 : -1)};
  left: ${(props) => (props.nested ? 0 : bigSpace(props))}px;
  right: ${(props) => (props.nested ? 0 : bigSpace(props))}px;
  min-height: ${(props) =>
    props.active ? `calc(100% - ${bigSpace(props)}px` : '0px'};
  height: ${({ active }) => (active ? 'auto' : '0px')};
  visibility: ${({ active }) => (active ? 'visible' : 'hidden')};
  overflow: hidden;
  transition: opacity 0.3s ease-out;
`;

export const CardListContainer = styled.div<{ nested?: boolean }>`
  flex-grow: 1;
  padding: ${(props) => (props.nested ? 0 : bigSpace(props))}px;
  overflow: auto;
  min-width: 368px;
  position: relative;
`;

const TitleWrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: ${bigButton}px;
  justify-content: center;
`;

const Title = styled.div<{ slideUp: boolean }>`
  position: relative;
  transition: transform 0.3s ease-in-out;
  font-size: 14px;
  transform: translateY(${({ slideUp }) => (slideUp ? '-10px' : '0px')});
`;

const SubTitle = styled.div<{ show: boolean }>`
  opacity: ${({ show }) => (show ? 1 : 0)};
  color: var(--color-foreground-inactive);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: ${(props) => 20 + 2 * smallSpace(props)}px;
  top: ${(props) => 21 + 2 * smallSpace(props)}px;
  right: 0;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  transform: translateY(${({ show }) => (show ? '0px' : '15px')});
`;

const SongArtworkContainer = styled.div`
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;

  img {
    opacity: 0.5;
  }
`;

const SongPlayIcon = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
`;

const SongTitle = styled.div`
  font-size: 12px;
  color: var(--color-foreground-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;
const SongTimeReadout = styled.div`
  font-size: 12px;
  color: var(--color-foreground-inactive);
`;

const SongTextWrapper = styled.div`
  display: flex;
  flex-direction: column;
`;

export const SongMeta = ({
  isPlaying,
  play,
  pause,
  title,
  artworkUrl,
  duration,
  getPlaybackTime,
}: {
  isPlaying: boolean;
  play: () => void;
  pause: () => void;
  title: string;
  artworkUrl: string;
  duration: number;
  getPlaybackTime: () => number;
}) => {
  const handleToggle = () => {
    if (isPlaying) {
      pause();
    } else {
      play();
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleToggle();
    }
  };

  return (
    <>
      <SongArtworkContainer
        onClick={handleToggle}
        onKeyDown={handleKeyDown}
        role='button'
        tabIndex={0}
        className='-ml-1 flex-shrink-0'
        aria-label={isPlaying ? 'Pause audio' : 'Play audio'}
      >
        <ImageWithFallback
          src={artworkUrl}
          alt={title}
          imageSize={SMALL_IMAGE}
          className='h-full w-full bg-background-primary object-cover'
          style={{ borderRadius: 'var(--border-radius)' }}
        />
        <SongPlayIcon>{isPlaying ? <PauseIcon /> : <PlayIcon />}</SongPlayIcon>
      </SongArtworkContainer>
      <SongTextWrapper>
        <SongTitle>{title}</SongTitle>
        <SongTimeReadout>
          <TimeReadout
            leftAlign
            getCurrentTime={getPlaybackTime}
            songEndSeconds={duration}
          />
        </SongTimeReadout>
      </SongTextWrapper>
    </>
  );
};

export const CollapsibleCardTitle = ({
  title,
  subtitle,
  expanded,
}: {
  title: string;
  subtitle?: string;
  expanded?: boolean;
}) => {
  const showSubtitle = !expanded && !!subtitle?.trim().length;
  return (
    <TitleWrapper>
      <Title slideUp={showSubtitle}>{title}</Title>
      <SubTitle show={showSubtitle}>{subtitle}</SubTitle>
    </TitleWrapper>
  );
};

export const FormContainer = observer(styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
`);