import styled from "styled-components";

import Button from "@ax/components/Button";

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
`;

const DragAndDropWrapper = styled.div`
  width: 290px;
  margin: ${(p) => p.theme.spacing.s} auto;
`;

const IconWrapper = styled.div`
  svg path {
    fill: ${(p) => p.theme.color.interactive01};
  }
`;

const DragTitle = styled.p`
  ${(p) => p.theme.textStyle.fieldLabel};
  color: ${(p) => p.theme.color.interactive01};
`;

const DropZone = styled.div<{ inDropZone: boolean }>`
  width: 276px;
  height: 276px;
  border-radius: 50%;
  border: 2px dashed ${(p) => p.theme.color.interactive01};
  background-color: ${(p) => (p.inDropZone ? p.theme.color.interactive01 : "transparent")};
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: ${(p) => p.theme.spacing.xxs};
  transition: background-color 0.15s;

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

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

const DragSubtitle = styled.p`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
`;

const DragError = styled.p`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.error};
  width: 100%;
  text-align: center;
`;

const FilesInput = styled.input`
  display: none;
`;

const _Button: any = (props: any) => <Button {...props} />;
const SelectButton = styled(_Button)`
  margin-top: ${(p) => p.theme.spacing.xs};
`;

const Actions = styled.div`
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-top: auto;
`;

export {
	Wrapper,
	DragAndDropWrapper,
	Actions,
	IconWrapper,
	DragTitle,
	DragSubtitle,
	DropZone,
	FilesInput,
	SelectButton,
	DragError,
};
