import styled from 'styled-components';
import { getFontSize, getSpacing, getColorAlias, convertToTransientProps } from '../../utils/index.js';
import { Loader } from '../Spinner/styles.js';

const InfoSubheading = styled.h2 `
  ${getFontSize('size16')};
  margin: ${getSpacing('s00', 's02', 's00', 's00')};
  padding: ${getSpacing('s00')};
  color: ${getColorAlias('contentDefault')};
  font-weight: ${(props) => props.theme.font.weightExtrabold};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;
const SizeBody = styled.span `
  ${getFontSize('size14')};
  margin-right: ${getSpacing('s02')};
  color: ${getColorAlias('contentDefault')};
`;
const MessageBody = styled.span `
  display: flex;
  ${getFontSize('size14')};
  margin-top: ${getSpacing('s01')};
  color: ${({ messageType }) => messageType === 'success'
    ? getColorAlias('contentPositive')
    : getColorAlias('contentError')};
  fill: ${({ messageType }) => messageType === 'success'
    ? getColorAlias('contentPositive')
    : getColorAlias('contentError')};

  svg {
    margin-right: ${getSpacing('s02')};
    ${getFontSize('size16')};
  }
`;
const FileInfoContainer = styled.div `
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;

  ${Loader} {
    margin-right: ${getSpacing('s02')};
  }
`;
const FileInfo = styled.div `
  display: flex;
  align-items: center;
`;
const AssistText = styled.span `
  ${getFontSize('size14')};
  margin-top: ${getSpacing('s01')};
  color: ${getColorAlias('contentDefault')};
`;
const Header = styled.div `
  display: flex;
  justify-content: space-between;
  color: ${getColorAlias('contentDefault')};
  ${getFontSize('size14')};
  margin-bottom: ${getSpacing('s01')};

  span:nth-child(1) {
    font-weight: ${(props) => props.theme.font.weightExtrabold};
    margin-right: ${getSpacing('s01')};
  }

  span:nth-child(2) {
    text-align: right;
    margin-left: ${getSpacing('s01')};
  }
`;
const UploaderContainer = styled.div `
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: ${({ width }) => width || '100%'};
`;
const UploaderWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'hasFile',
        'shouldDisplayThumbnail',
    ]),
}) `
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: ${getSpacing('s04')};
  border: ${(props) => `1px solid ${getColorAlias('borderDefault', props.theme)}`};
  border-radius: ${({ theme: { radius }, hasFile, shouldDisplayThumbnail }) => `${radius.roundedB} ${radius.roundedB}
    ${shouldDisplayThumbnail && hasFile ? radius.roundedNone : radius.roundedB}
    ${shouldDisplayThumbnail && hasFile ? radius.roundedNone : radius.roundedB}`};
`;
const FileContainer = styled.div `
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: ${({ theme }) => theme.global.black};
  border-right: ${(props) => `1px solid ${getColorAlias('borderDefault', props.theme)}`};
  border-left: ${(props) => `1px solid ${getColorAlias('borderDefault', props.theme)}`};
  border-bottom: ${(props) => `1px solid ${getColorAlias('borderDefault', props.theme)}`};
  border-radius: ${({ theme: { radius } }) => `0 0 ${radius.roundedB} ${radius.roundedB}`};
  max-height: 200px;

  img {
    max-height: 199px;
    max-width: 100%;
    object-fit: contain;
  }
`;
const ActionButtonsWrapper = styled.div `
  display: flex;
`;

export { ActionButtonsWrapper, AssistText, FileContainer, FileInfo, FileInfoContainer, Header, InfoSubheading, MessageBody, SizeBody, UploaderContainer, UploaderWrapper };
