import styled from "styled-components";

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

const ModalContent = styled.div`
  display: flex;
  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
  overflow: auto;
  flex-grow: 1;
  flex-direction: column;
  position: relative;
`;

const Header = styled.div`
  position: sticky;
  display: flex;
  flex-direction: column;
  z-index: 3;
`;

const ModalTabs = styled.div`
  width: 100%;
  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
  border-right: 1px solid ${(p) => p.theme.color.uiLine};
  padding: 0 ${(p) => p.theme.spacing.m};
  background-color: ${(p) => p.theme.color.uiBackground02};
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const SearchWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
  border-right: 1px solid ${(p) => p.theme.color.uiLine};
  background-color: ${(p) => p.theme.color.uiBackground02};
`;

const Search = styled.div<{ full: boolean }>`
  width: ${(p) => (p.full ? "100%" : "600px")};
`;

const Filters = styled.div`
  display: flex;
  height: ${(p) => p.theme.spacing.l};
  align-items: center;
  & > * {
    &:not(:last-child) {
      margin-right: ${(p) => p.theme.spacing.m};
    }
  }
  .headerWrapper {
    padding: 0;
  }
`;

const FilterWrapper = styled.div`
  position: relative;
`;

const TabsWrapper = styled.div`
  width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
`;

const FormsGrid = styled.div`
  padding-bottom: ${(p) => p.theme.spacing.l};
  columns: 300px;
`;

const FormWrapper = styled.div`
  display: flex;
  flex-direction: column;
  padding-bottom: ${(p) => p.theme.spacing.s};
  break-inside: avoid-column;
`;

const FormItem = styled.div<{ isSelected: boolean }>`
  background-color: ${(p) => p.theme.color.uiBackground02};
  border: ${(p) => (p.isSelected ? `3px solid ${p.theme.color.interactive01}` : "3px solid transparent")};
  border-radius: ${(p) => p.theme.radii.s};
  cursor: pointer;
  padding: ${(p) => p.theme.spacing.xs};
  min-height: 193px;
`;

const FormTitle = styled.div`
  ${(p) => p.theme.textStyle.uiL};
  padding-top: ${(p) => p.theme.spacing.xs};
`;

const SearchTags = styled.div`
  & > div:nth-child(1) {
    margin-bottom: ${(p) => p.theme.spacing.s};
  }
  & > div:nth-child(2) {
    margin-top: ${(p) => p.theme.spacing.xs};
  }
`;

const ModalFooter = styled.div`
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: flex-end;
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
  button:not(:first-child) {
    margin-left: ${(p) => p.theme.spacing.s};
  }
  border-radius: 0 0 4px 4px;
`;

const EmptyWrapper = styled.div`
  height: 100%;
  display: flex;
  align-items: center;
`;

export {
	Wrapper,
	ModalContent,
	ModalTabs,
	Header,
	Search,
	Filters,
	TabsWrapper,
	FormsGrid,
	FormItem,
	FilterWrapper,
	SearchTags,
	SearchWrapper,
	ModalFooter,
	EmptyWrapper,
	FormWrapper,
	FormTitle,
};
