import {Sequence, useCurrentFrame} from 'remotion';
import type {EditProps} from '../../src/model';
import {trailLayout} from './model';
import {Box, Camera, ease, ink, paper, progress, Stage} from '../../src/visuals';
import {RouteBadge, TrailMap} from './assets';

export const TrailEdit = ({kind, properties}: {kind: 'CameraPush' | 'MotifMontage'; properties: EditProps}) => {
  const frame = useCurrentFrame();
  const travel = progress(frame, properties.action, properties.change);
  const variant = frame < properties.action ? 0 : Math.min(3, 1 + Math.floor((frame - properties.action) / (properties.change - properties.action)));
  return <Stage>
    {kind === 'CameraPush' ? <>
      <Camera p={properties} amount={ease(travel)}>
        <TrailMap/>
        <Box x={975} y={270} w={125} h={125}><RouteBadge/></Box>
        {frame >= properties.settle && <Box x={672} y={388} w={265} h={54} style={{boxSizing: 'border-box', borderRadius: 10, background: ink, color: paper, padding: '15px 18px', fontSize: 18, textAlign: 'center'}}>Keep this landmark.</Box>}
      </Camera>
      <Box x={0} y={0} w={1280} h={130} style={{background: paper}}/>
      <Box x={0} y={650} w={1280} h={70} style={{background: paper}}/>
      <Box x={80} y={34} w={1120} h={81} style={{background: paper}}>
        <div style={{fontSize: 13, letterSpacing: 3, color: properties.accent, marginBottom: 8}}>RIDGE ATLAS / ORIGINAL MAP</div>
        <div style={{fontSize: 34, fontWeight: 700}}>Find the detail. Let it settle.</div>
      </Box>
      <Box x={80} y={666} w={1120} h={34} style={{background: paper, fontSize: 16, letterSpacing: 1}}>01 / THE LOOKOUT <span style={{float: 'right'}}>Fictional terrain · Not for navigation</span></Box>
    </> : <>
      <Box x={80} y={42} w={1120} h={105}>
        <div style={{fontSize: 13, letterSpacing: 3, color: properties.accent, marginBottom: 10}}>RIDGE ATLAS / ROUTE MARKER</div>
        <div style={{fontSize: 40, fontWeight: 700}}>{properties.title}</div>
      </Box>
      <Box x={85} y={167} w={430} h={430}><RouteBadge variant={variant}/></Box>
      <Box x={610} y={211} w={560} h={300}>
        <div style={{fontSize: 14, letterSpacing: 2, color: properties.accent, marginBottom: 28}}>ONE RIDGE. FOUR TREATMENTS.</div>
        <div style={{fontSize: 42, fontWeight: 700, marginBottom: 24}}>{['The route', 'Contour lines', 'Water lines', 'Forest edge'][variant]}</div>
        <div style={{fontSize: 24, lineHeight: 1.55, maxWidth: 500}}>The same peak and path.<br/>A different way to remember it.</div>
        <div style={{display: 'flex', gap: 12, marginTop: 34}}>{[0, 1, 2, 3].map(index => <div key={index} style={{width: 53, height: 5, background: index === variant ? ink : '#c7cec0'}}/>)}</div>
      </Box>
      <Box x={80} y={642} w={1120} h={48} style={{borderTop: '1px solid #bbc8b5', paddingTop: 18, fontSize: 16, letterSpacing: 1}}>02 / THE MARKER <span style={{float: 'right'}}>Original vector artwork · Silent study</span></Box>
    </>}
  </Stage>;
};

export const TrailSequence = () => <>{trailLayout().map(beat => <Sequence key={beat.kind} from={beat.from} durationInFrames={beat.frames} name={`Trail / ${beat.kind}`}><TrailEdit kind={beat.kind} properties={beat.properties}/></Sequence>)}</>;