import { gray200, gray250, gray900, lavender, lightLine, lightSmoke } from '@/styles/colors';
import styled from '@emotion/styled';

const GridAnimationWrapper = styled.div`
  background: ${lightLine};
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-gap: 10px;
  padding: 20px;
`;

const VerticalLine = styled.div`
  width: 1px;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
`;

const Inputs = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
`;
const Outputs = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
`;
const PortalWrapper = styled.div<{ input?: boolean }>`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding-bottom: 20px;

  &:before {
    content: '';
    display: block;
    position: absolute;
    top: calc(50%);
    left: ${({ input }) => (input ? 'calc(100% - 16px)' : '')};
    right: ${({ input }) => (input ? '' : 'calc(100% - 16px)')};
    width: 16px;
    height: 1px;
    background-image: linear-gradient(
      to ${({ input }) => (input ? 'right' : 'left')},
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5)
    );
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    ${({ input }) => (input ? 'left: 100%' : 'right: 100%')};
    top: 50%;
    width: 10px;
    height: 1px;
    background-color: black;
  }
`;

const TrackName = styled.label<{ active: boolean }>`
  font-family: Architekt;
  font-size: 12px;
  color: ${lavender};
  font-weight: 700;
  padding-left: 20px;
  margin-bottom: 5px;
  color: ${gray200};
`;

const DeviceNodeWrapper = styled.div``;

const PortalNodeWrapper = styled.div<{ color: string }>`
  color: ${gray900};
  width: 100px;
  position: relative;
  height: auto;
  border: 1px solid ${({ color }) => color};
  background: ${({ color }) => color};
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 30px;
`;

const ConnectionDot = styled.div<{ color: string }>`
  width: 10px;
  height: 10px;
  border-radius: 12px;
  border: 1px solid ${({ color }) => color};
  background-color: ${({ color }) => color};
  position: relative;
`;

const Portal = ({
  input = false,
  children,
  color,
  nodeColor,
}: {
  input?: boolean;
  children: string;
  color: string;
  nodeColor: string;
}) => {
  return (
    <DeviceNodeWrapper>
      <PortalNodeWrapper color={color}>
        {input ? (
          <>
            <ConnectionDot color={nodeColor} style={{ transform: 'translateX(-5px)' }}></ConnectionDot>
            <div style={{ marginRight: 10 }}>{children}</div>
          </>
        ) : (
          <>
            <div style={{ marginLeft: 10 }}>{children}</div>
            <ConnectionDot color={nodeColor} style={{ transform: 'translateX(5px)' }}></ConnectionDot>
          </>
        )}
      </PortalNodeWrapper>
    </DeviceNodeWrapper>
  );
};

const PortalsLink = () => {
  return (
    <GridAnimationWrapper>
      <Wrapper>
        <Inputs>
          <PortalWrapper input>
            <TrackName active>Track 1</TrackName>
            <Portal color={gray250} nodeColor={lightSmoke} input>
              Kick
            </Portal>
          </PortalWrapper>
          <PortalWrapper input>
            <TrackName active>Track 2</TrackName>
            <Portal color={gray250} nodeColor={lightSmoke} input>
              Snare
            </Portal>
          </PortalWrapper>
          <PortalWrapper input>
            <TrackName active>Track 3</TrackName>
            <Portal color={gray250} nodeColor={lightSmoke} input>
              HH Loop
            </Portal>
          </PortalWrapper>
        </Inputs>
        <VerticalLine />
        <Outputs>
          <PortalWrapper>
            <TrackName active>Drum GRP</TrackName>
            <Portal nodeColor={lightSmoke} color={gray250}>
              Output
            </Portal>
          </PortalWrapper>
        </Outputs>
      </Wrapper>
    </GridAnimationWrapper>
  );
};

export default PortalsLink;