import { darkLine, gray125, gray200, gray400, gray900, lightLine, lightSmoke } from '@/styles/colors';
import styled from '@emotion/styled';

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

const JSDeviceWrapper = styled.div`
  height: auto;
  font-family: Architekt;
  width: 190px;
  border-radius: 12px;
  border: 1px solid ${gray400};
  background-color: ${gray125};
`;

const DeviceHeader = styled.header`
  position: relative;
  padding: 6px 12px 5px 12px;
  border-bottom: 1px solid ${gray400};
  color: ${darkLine};
  font-weight: 600;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  transition: all 0.5s;
`;

const DeviceBody = styled.div<{ shade?: boolean }>`
  background-color: ${({ shade }) => (shade ? gray200 : 'transparent')};
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  column-gap: 40px;
  padding-top: 4px;
  padding-bottom: 8px;
`;

const ConnectionListWrapper = styled.div<{ leftSide?: boolean }>`
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: ${({ leftSide }) => (leftSide ? 'flex-start' : 'flex-end')};
  margin-left: -6px;
  margin-right: -6px;
  > div:after {
    ${({ leftSide }) => (leftSide ? 'left: -8rem' : 'right: -8rem')};
  }
`;

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

const ConnectionWrapper = styled.div`
  color: ${gray900};
  position: relative;
  padding: 5px 0;
  left: 1px;
  display: flex;
  align-items: center;
  > * + * {
    margin-left: 7px;
  }
`;

const Connections = ({
  input,
  children,
  color,
}: {
  input: boolean;
  children?: JSX.Element | string;
  color: string;
}) => {
  return (
    <ConnectionListWrapper leftSide={input}>
      <ConnectionWrapper>
        {input ? (
          <>
            <ConnectionDot color={color}></ConnectionDot>
            <div>{children}</div>
          </>
        ) : (
          <>
            <div>{children}</div>
            <ConnectionDot color={color}></ConnectionDot>
          </>
        )}
      </ConnectionWrapper>
    </ConnectionListWrapper>
  );
};

const SignalSplit = () => {
  return (
    <GridAnimationWrapper>
      <JSDeviceWrapper>
        <DeviceHeader>Correlator</DeviceHeader>
        <DeviceBody>
          <ConnectionListWrapper leftSide>
            <ConnectionWrapper>
              <ConnectionDot color={lightSmoke}></ConnectionDot>
              <div>Input 1</div>
            </ConnectionWrapper>
            <ConnectionWrapper>
              <ConnectionDot color={lightSmoke}></ConnectionDot>
              <div>Input 2</div>
            </ConnectionWrapper>
          </ConnectionListWrapper>
          <ConnectionListWrapper>
            <ConnectionWrapper>
              <div>Correlated</div>
              <ConnectionDot color={lightSmoke}></ConnectionDot>
            </ConnectionWrapper>
            <ConnectionWrapper>
              <div>Uncorrelated</div>
              <ConnectionDot color={lightSmoke}></ConnectionDot>
            </ConnectionWrapper>
          </ConnectionListWrapper>
        </DeviceBody>
      </JSDeviceWrapper>
    </GridAnimationWrapper>
  );
};

export default SignalSplit;