import React from 'react';
import { Sequence, AbsoluteFill, Img, Video } from '../../engine/components';
import { TimelineElement, TimelineLayer, MediaFilter } from '../../types';

const getFilterStyle = (filter?: MediaFilter): React.CSSProperties => {
  switch (filter) {
    case 'grayscale':
      return { filter: 'grayscale(100%)' };
    case 'sepia':
      return { filter: 'sepia(100%)' };
    case 'contrast':
      return { filter: 'contrast(150%)' };
    default:
      return {};
  }
};

interface BackgroundLayerProps {
  timelineElements: TimelineElement[];
  layers: TimelineLayer[];
}

export const BackgroundLayer: React.FC<BackgroundLayerProps> = ({ timelineElements, layers }) => {
  const backgroundElements = timelineElements.filter(
    el => layers?.find(l => l.id === el.layerId)?.type === 'background'
  );

  return (
    <>
      {backgroundElements.map((el) => {
        if (el.isHidden) return null;
        const filterStyle = getFilterStyle(el.filter || 'none');
        // Calculate base opacity
        const layerOpacity = layers.find(l => l.id === el.layerId)?.opacity ?? 1;
        const opacity = ((el.opacity ?? 100) / 100) * layerOpacity;

        return (
          <Sequence key={el.id} from={el.startFrame} durationInFrames={el.endFrame - el.startFrame}>
            <AbsoluteFill style={{ ...filterStyle, opacity }}>
              {el.type === 'color' && (
                <div style={{
                  width: '100%',
                  height: '100%',
                  ...(el.content.includes('gradient')
                    ? { background: el.content }
                    : { backgroundColor: el.content }),
                }}>
                  {el.backgroundPattern && (
                    <div style={{
                      position: 'absolute',
                      inset: 0,
                      backgroundImage: el.backgroundPattern,
                      backgroundSize: '10px 10px',
                    }} />
                  )}
                </div>
              )}
              {el.type === 'image' && <Img src={el.content} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />}
              {el.type === 'video' && <Video src={el.content} style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={(e) => console.warn('Video failed to load', e)} />}
            </AbsoluteFill>
          </Sequence>
        );
      })}
    </>
  );
};
