import styled from "styled-components";

const Item = styled.div`
  display: flex;
  flex-direction: column;
  background-color: ${(p) => p.theme.color.uiBackground02};
  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
  min-height: ${(p) => p.theme.spacing.l};
`;

const User = styled.div`
  display: flex;
  align-items: center;
  padding: ${(p) => `11px ${p.theme.spacing.s} ${p.theme.spacing.xs} ${p.theme.spacing.s}`};
`;

const Name = styled.div`
  position: relative;
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.colors.textHighEmphasis};
  width: 25%;
  min-width: 0;
  > * {
    min-width: 0;
  }
`;

const Title = styled.div`
  width: 100%;
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.colors.textHighEmphasis};
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  min-width: 0;
`;

const AvatarWrapper = styled.div`
  margin-right: ${(p) => p.theme.spacing.s};
`;

const CounterWrapper = styled.div`
  ${(p) => p.theme.textStyle.uiL};
  color: ${(p) => p.theme.colors.textMediumEmphasis};
`;

const ToggleWrapper = styled.div`
  margin-left: auto;
`;

const EventList = styled.div<{ isOpen: boolean }>`
  display: flex;
  flex-direction: column;
  height: ${(p) => (p.isOpen ? "auto" : "0px")};
  overflow: hidden;
`;

const Toggle = styled.button<{ isOpen: boolean }>`
  ${(p) => p.theme.textStyle.uiS};
  position: relative;
  padding-right: ${(p) => p.theme.spacing.s};
  color: ${(p) => p.theme.colors.textMediumEmphasis};
  &:after {
    position: absolute;
    top: 6px;
    right: 0;
    content: "";
    border: solid ${(p) => p.theme.color.interactive01};
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: ${(p) => (p.isOpen ? `rotate(-135deg) translate(-3px, 0)` : `rotate(45deg) translate(0, -3px)`)};
  }
`;

export { Item, User, Name, Title, AvatarWrapper, EventList, CounterWrapper, ToggleWrapper, Toggle };
