import styled from 'styled-components';
import { getColor } from 'package/helpers';
import logo from 'static/Fovea_arc.svg';

const Overlay = styled('div')`
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: ${props => props.$visible ? 1 : 0};
  transition: opacity 0.4s ease;
  background-color: ${props => props.$visible ? getColor(props, 'primary') + '99' : 'transparent'};
  backdrop-filter: ${props => props.$visible ? 'blur(0.2rem)' : 'blur(0)'};
`;

const Logo = styled('img')`
  width: 35.625rem;
  user-select: none;
`;

const TextGroup = styled('div')`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
`;

const Title = styled('p')`
  color: ${props => getColor(props, 'onPrimary')};
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
`;

const Subtitle = styled('p')`
  color: ${props => getColor(props, 'onPrimary')};
  opacity: 0.6;
  font-size: 0.8rem;
  margin: 0.25rem 0 0;
`;

const DragDropInstructions = ({ theme, selectedTheme, modelLoaded }) => (
  <Overlay theme={theme} $selectedTheme={selectedTheme} $visible={!modelLoaded}>
    <Logo src={logo} draggable={false} />

    <TextGroup>
      <Title theme={theme} $selectedTheme={selectedTheme}>
        Drag & Drop Files To Begin
      </Title>
      <Subtitle theme={theme} $selectedTheme={selectedTheme}>
        must be in the following formats:
      </Subtitle>
      <Subtitle theme={theme} $selectedTheme={selectedTheme}>
        gLTF (with .bin + textures folder, if needed) or GLB
      </Subtitle>
    </TextGroup>
  </Overlay>
);

export { DragDropInstructions };
