import React from "react";
import styled from "styled-components";
import Button from "@ax/components/Button";

const Wrapper = styled.div<{ inverse: boolean }>`
  background-color: ${(p) => (p.inverse ? p.theme.color.overlay : p.theme.color.uiBarBackground)};
  position: relative;
  transition: opacity 0.1s;
  height: 100%;
  width: 100%;
  padding: ${(p) => p.theme.spacing.m};
`;

const StatusWrapper = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
`;

const DragStatus = styled.div`
  transition: opacity 0.1s;
`;

const DragTitle = styled.div`
  ${(p) => p.theme.textStyle.fieldLabel};
  margin-bottom: ${(p) => p.theme.spacing.xxs};
`;

const DragSubtitle = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  margin-bottom: ${(p) => p.theme.spacing.xxs};
`;

const DragIcon = styled.div`
  height: ${(p) => p.theme.spacing.l};
  margin-bottom: ${(p) => p.theme.spacing.s};
  display: flex;
  justify-content: center;
`;

const DropIcon = styled.div`
  height: ${(p) => p.theme.spacing.l};
  width: ${(p) => p.theme.spacing.l};
  margin: ${(p) => `0 auto ${p.theme.spacing.s} auto`};
  svg {
    path {
      fill: ${(p) => p.theme.color.interactiveInverse};
    }
  }
`;

const SuccessIcon = styled.div`
  display: flex;
  justify-content: center;
  height: ${(p) => p.theme.spacing.l};
  margin-bottom: ${(p) => p.theme.spacing.s};
  svg {
    path {
      fill: ${(p) => p.theme.color.online};
    }
  }
`;

const UploadingStatus = styled.div`
  transition: opacity 0.1s;
`;

const SuccessStatus = styled.div`
  transition: opacity 0.1s;
  ${DragIcon} {
    svg {
      path {
        fill: ${(p) => p.theme.color.online};
      }
    }
  }
  ${DragTitle} {
    color: ${(p) => p.theme.color.textHighEmphasis};
  }
`;

const ErrorStatus = styled.div`
  display: flex;
  justify-content: center;
  transition: opacity 0.1s;
  ${DragIcon} {
    svg {
      path {
        fill: ${(p) => p.theme.color.error};
      }
    }
  }
  ${DragTitle} {
    color: ${(p) => p.theme.color.textHighEmphasis};
  }
`;

const DragOverStatus = styled.div`
  transition: opacity 0.1s;
  ${DragIcon} {
    svg {
      path {
        fill: #ffffff;
      }
    }
  }
`;

const DragAndDropWrapper = styled.div<{
	inDropZone: boolean;
	uploading: boolean;
	success: boolean;
	error: boolean;
	inverse: boolean;
	cropping: boolean;
}>`
  border: ${(p) =>
		`2px dashed ${p.inDropZone || p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01}`};
  border-radius: 4px;
  background-color: ${(p) =>
		p.inDropZone ? p.theme.color.interactive01 : p.inverse ? "transparent" : p.theme.color.uiBarBackground};
  width: 100%;
  height: 100%;
  opacity: ${(p) => (p.uploading || p.success || p.error || p.cropping ? "0" : "1")};
  display: ${(p) => (p.uploading || p.success || p.error || p.cropping ? "none" : "block")};
  transition: opacity 0.1s;

  ${DragStatus} {
    opacity: ${(p) => (p.inDropZone ? "0" : "1")};
    display: ${(p) => (p.inDropZone ? "none" : "block")};
  }

  ${DragOverStatus} {
    opacity: ${(p) => (p.inDropZone ? "1" : "0")};
    display: ${(p) => (p.inDropZone ? "block" : "none")};
  }

  ${DragTitle} {
    color: ${(p) => (p.inDropZone || p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
  }

  ${DragSubtitle} {
    color: ${(p) =>
			p.inDropZone || p.inverse ? p.theme.color.textMediumEmphasisInverse : p.theme.color.textMediumEmphasis};
  }

  ${DragIcon} {
    svg {
      path {
        fill: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
      }
    }
  }
`;

const UploadingWrapper = styled.div<{
	inDropZone: boolean;
	uploading: boolean;
	success: boolean;
	error: boolean;
	inverse: boolean;
}>`
  border: ${(p) => (p.success || p.error ? `none` : `2px dashed ${p.theme.color.interactive01}`)};
  border-radius: 4px;
  background-color: ${(p) => (p.inverse ? "transparent" : p.theme.color.uiBackground01)};
  padding: ${(p) => p.theme.spacing.m};
  width: 100%;
  height: 100%;
  opacity: ${(p) => (p.uploading || p.success || p.error ? "1" : "0")};
  display: ${(p) => (p.uploading || p.success || p.error ? "block" : "none")};
  transition: opacity 0.1s;

  ${UploadingStatus} {
    opacity: ${(p) => (p.uploading ? "1" : "0")};
    display: ${(p) => (p.uploading ? "block" : "none")};
  }

  ${SuccessStatus} {
    opacity: ${(p) => (p.success ? "1" : "0")};
    display: ${(p) => (p.success ? "block" : "none")};
  }

  ${ErrorStatus} {
    opacity: ${(p) => (p.error ? "1" : "0")};
    display: ${(p) => (p.error ? "block" : "none")};
  }

  ${DragTitle} {
    color: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
  }

  ${DragIcon} {
    svg {
      path {
        fill: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
      }
    }
  }
`;

const ErrorMsg = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  margin-top: ${(p) => p.theme.spacing.xxs};
`;

const StyledButton = styled((props) => <Button {...props} />)`
  margin-top: ${(p) => p.theme.spacing.s};
`;

const FilesInput = styled.input<{ ref: any }>`
  display: none;
`;

const _Button: any = React.forwardRef((props: any, ref?: React.Ref<HTMLDivElement>) => <Button {...props} />);
const FilesButton = styled(_Button)`
  margin-top: ${(p) => p.theme.spacing.xs};
  margin-bottom: ${(p) => p.theme.spacing.xs};

  &.inverse {
    background-color: transparent;

    :hover:before {
      background-color: ${(p) => p.theme.color.overlay};
    }
    :focus:before {
      background-color: ${(p) => p.theme.color.overlay};
    }
    :active:before {
      background-color: ${(p) => p.theme.color.overlay};
    }
  }
`;

const ProgressBar = styled.div`
  margin-bottom: ${(p) => p.theme.spacing.xs};
`;

const CropWrapper = styled.div<{
	cropping: boolean;
}>`
  width: 100%;
  height: 100%;
  opacity: ${(p) => (p.cropping ? "1" : "0")};
  display: ${(p) => (p.cropping ? "block" : "none")};
  transition: opacity 0.1s;
`;

export {
	Wrapper,
	StatusWrapper,
	DragStatus,
	DragTitle,
	DragSubtitle,
	DragIcon,
	DropIcon,
	SuccessIcon,
	UploadingStatus,
	SuccessStatus,
	ErrorStatus,
	DragOverStatus,
	DragAndDropWrapper,
	UploadingWrapper,
	ErrorMsg,
	StyledButton,
	FilesInput,
	FilesButton,
	ProgressBar,
	CropWrapper,
};
