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;
`;

const Container = styled.div`
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  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 Node = ({ children }: { children: string }) => {
  return (
    <DeviceNodeWrapper>
      <JSDeviceWrapper>
        <DeviceHeader>{children}</DeviceHeader>
        <DeviceBody>
          <Connections color={lightSmoke} input={true}>
            MIDI
          </Connections>
          <Connections color={lightSmoke} input={false}>
            Audio
          </Connections>
        </DeviceBody>
      </JSDeviceWrapper>
    </DeviceNodeWrapper>
  );
};

const WavetableSynth = () => {
  return (
    <GridAnimationWrapper>
      <Container>
        <Node>Wavetable Synth</Node>
      </Container>
    </GridAnimationWrapper>
  );
};

export default WavetableSynth;