import { FloatingNote } from "@ax/components";

import styled, { css } from "styled-components";

const BrowserWrapper = styled.div<{ scaledWidth?: number; isPreview?: boolean }>`
  background-color: ${(p) => p.theme.color.uiBackground01};
  display: flex;
  flex-direction: column;
  height: ${(p) => (p.isPreview ? "100%" : `calc(100vh - ${p.theme.spacing.xl} - (${p.theme.spacing.m} * 2))`)};
  min-width: 360px;
  width: ${(p) => (p.scaledWidth !== undefined ? `${p.scaledWidth}px` : "100%")};
  margin: 0 auto;
`;

const NavBar = styled.div`
  display: flex;
  background-color: ${(p) => p.theme.color.uiBackground03};
  border-radius: 4px 4px 0 0;
  height: calc(${(p) => p.theme.spacing.m} + (${(p) => p.theme.spacing.xs} * 2));
  padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.m};
`;

const NavUrl = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  background-color: ${(p) => p.theme.color.uiBackground02};
  border-radius: 10px;
  color: ${(p) => p.theme.color.textMediumEmphasis};
  height: ${(p) => p.theme.spacing.m};
  padding: ${(p) => p.theme.spacing.xxs} ${(p) => p.theme.spacing.s};
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
`;

const NavActions = styled.div`
  display: flex;
  padding-left: ${(p) => p.theme.spacing.xs};
`;

const IconWrapper = styled.div<{ active?: boolean }>`
  margin-left: ${(p) => p.theme.spacing.m};

  cursor: ${(p) => (p.active === false ? "default" : "pointer")};

  ${(p) =>
		p.active !== false &&
		css`
    :hover {
      svg {
        path {
          fill: ${p.theme.color.interactive01};
        }
      }
    }
  `}

  svg {
    path {
      fill: ${(p) => (p.active ? p.theme.color.interactive01 : p.theme.color.iconNonActive)};
    }
  }
`;

const FrameWrapper = styled.div<{ hasBorder: boolean; isFormEditor: boolean }>`
  border-left: ${(p) => (p.hasBorder ? `1px solid ${p.theme.color.uiLine}` : "none")};
  border-right: 1px solid ${(p) => p.theme.color.uiLine};
  border-bottom: ${(p) => (p.hasBorder ? `1px solid ${p.theme.color.uiLine}` : "none")};
  display: flex;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: ${(p) => (p.isFormEditor ? `${p.theme.spacing.m} 0 0 ${p.theme.spacing.m}` : "0")};
`;

const OuterContainer = styled.div`
  width: 100%;
  height: 100%;
`;

const FrameLoading = styled.div`
  position: absolute;
  inset: 0;
  z-index: 1;
`;

const Wrapper = styled.div`
  border-left: 1px solid ${(p) => p.theme.color.uiLine};
  border-right: 1px solid ${(p) => p.theme.color.uiLine};
  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
  overflow: auto;
  scroll-behavior: smooth;
  flex: 1;
  min-height: 0;
  position: relative;

  .headroom {
    position: relative !important;
  }
`;

const ContentWrapper = styled.div`
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
`;

const StyledFloatingNote = styled(({ $compact: _, ...props }) => <FloatingNote {...props} />)<{ $compact?: boolean }>`
  position: absolute;
  left: ${(p) => p.theme.spacing.s};
  top: ${(p) => p.theme.spacing.s};
  right: ${(p) => p.theme.spacing.s};
  ${(p) => p.$compact && `&& { padding: ${p.theme.spacing.xs} ${p.theme.spacing.s}; }`}
`;

const ResolutionWrapper = styled.div`
  display: flex;
  margin-left: ${(p) => p.theme.spacing.xs};
  min-width: 115px;
  background-color: ${(p) => p.theme.color.uiBackground02};
  border-radius: 10px;
  align-items: center;
  height: 24px;
`;

const SelectLabel = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  flex-shrink: 0;
  padding-left: ${(p) => p.theme.spacing.xs};
  color: ${(p) => p.theme.color.textMediumEmphasis};
`;

const ZoomWrapper = styled.div`
  margin-left: ${(p) => p.theme.spacing.s};
  min-width: 65px;
`;

export {
	OuterContainer,
	BrowserWrapper,
	NavBar,
	NavUrl,
	NavActions,
	IconWrapper,
	FrameWrapper,
	Wrapper,
	ContentWrapper,
	StyledFloatingNote,
	ResolutionWrapper,
	ZoomWrapper,
	SelectLabel,
	FrameLoading,
};
