import styled, { css } from 'styled-components';
import BaseSQLEditor from 'components/common/SQLEditor/SQLEditor';

export const QueryWrapper = styled.div`
  padding: 16px;
`;

export const KSQLInputsWrapper = styled.div`
  display: flex;
  gap: 24px;
  padding-bottom: 16px;

  @media screen and (max-width: 769px) {
    flex-direction: column;
  }
`;

export const KSQLInputHeader = styled.div`
  display: flex;
  justify-content: space-between;
  color: ${({ theme }) => theme.default.color.normal};
`;

export const InputsContainer = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 30px;
  align-items: center;
  gap: 10px;
`;

export const Fieldset = styled.fieldset`
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  color: ${({ theme }) => theme.default.color.normal};
`;

export const ButtonsContainer = styled.div`
  display: flex;
  gap: 8px;
`;

export const SQLEditor = styled(BaseSQLEditor)(
  ({ readOnly, theme }) =>
    css`
      background: ${readOnly && theme.ksqlDb.query.editor.readonly.background};
      .ace-cursor {
        ${readOnly && `background: ${theme.default.transparentColor} `}
      }

      .ace_content {
        background-color: ${theme.default.backgroundColor};
        color: ${theme.default.color.normal};
      }
      .ace_line {
        background-color: ${theme.ksqlDb.query.editor.activeLine
          .backgroundColor};
      }
      .ace_gutter-cell {
        background-color: ${theme.ksqlDb.query.editor.cell.backgroundColor};
      }
      .ace_gutter-layer {
        background-color: ${theme.ksqlDb.query.editor.layer.backgroundColor};
        color: ${theme.default.color.normal};
      }
      .ace_cursor {
        color: ${theme.ksqlDb.query.editor.cursor};
      }

      .ace_print-margin {
        display: none;
      }
    `
);