/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import Theme from 'theme';
import {InputComponentWrapper} from 'components/forms/Input';
// import {AdvancedSelectContainer, ComponentWrapper} from 'components/ui/advanced-select/advanced-select';
// import InputWithTagsWrapper from 'components/ui/input-with-tags/input-with-tags';
// import TagContainer from 'components/ui/input-with-tags/input-with-tags';
// import TagWrapper from 'components/ui/input-with-tags/input-with-tags';

const {spacing, blackWithOpacity, typography, colors, primaryBorderRadius, primaryBorderColor} = Theme;

export const DialogContent = styled.default.div`
  display: flex;
  width: 400px;
  margin: ${spacing.small};
`;

export const DialogForm = styled.default.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  /* stylelint-disable */
  & ${InputComponentWrapper} {
    width: 100%;
    max-width: 100%;
  }
  /* TagWrapper {
    & > div {
      width: 100%;
      max-width: 100%;
    }
  } */
  /* stylelint-enable */
  h3 {
    color: ${colors.gray700};
    font-size: ${typography.fontSizeXl};
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.36px;
    display: flex;
    align-items: flex-start;
    a {
      font-size: ${typography.fontSizeS};
      margin: 0 0 0 0.5rem;
    }
  }
  > p {
    color: ${blackWithOpacity};
    font-size: ${typography.primaryFontSize};
    margin-top: ${spacing.small};
    line-height: 24px;
    i {
      font-weight: bold;
      padding: 0 ${spacing.xsmall};
    }
    a {
      color: ${colors.lightBlue};
      text-decoration: underline;
    }
  }
  strong {
    p {
      margin-top: 0;
      margin-bottom: ${spacing.xSmall};
    }
    svg {
      margin: 0 ${spacing.xxSmall};
      color: ${colors.lightBlue};
    }
  }
  select {
    background: ${colors.transparent};
    border: 1px solid ${primaryBorderColor} !important;
  }
  input {
    padding: ${spacing.small};
    margin-bottom: ${spacing.xSmall};
  }
  .button-group {
    display: flex;
    margin-top: ${spacing.small};
    justify-content: center;
  }
  .error-text {
    font-size: ${typography.fontSizeXS};
    color: ${colors.lightRed};
  }
  .loading {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
`;

export const Options = styled.default.div`
  display: flex;
  align-items: flex-end;

  &>div {
    margin: 0 1rem 0 0;
  }
`;

export const DialogResponse = styled.default(DialogContent)<{error?: string | boolean | Error}>`
  width: 100%;
  margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  h3 {
    color: ${colors.green};
    font-size: ${typography.fontSizeXl};
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.36px;
    ${({error}) =>
      error &&
      styled.css`
        color: ${colors.lightRed};
      `}
  }
  .response-icon{
    img {
      width: 100px;
      height: 100px;
      margin: ${spacing.small} 0;
    }
  }
  .json-renderer {
    margin-top: ${spacing.small};
    width: 100%;
    height: auto;
    height: 300px;
    padding: ${spacing.small};
    overflow: auto;
    background-color: ${colors.gray200};
    font-size: ${typography.fontSizeS};
  }
`;

export const StatusCode = styled.default.div<{error?: string | boolean | Error}>`
  display: flex;
  justify-content: center;
  width: 100%;
  margin: ${spacing.xxSmall} 0;
  padding: ${spacing.xsmall} 0;
  color: ${colors.green};
  border-radius: ${primaryBorderRadius};
  border: 1px solid ${colors.green};
  ${({error}) =>
    error &&
    styled.css`
      border-color: ${colors.lightRed};
      color: ${colors.lightRed};
    `}
`;

export const Error = styled.default.div`
  font-size: ${typography.fontSizeXS};
  color: ${colors.lightRed};
`;

export const FormLoaderContainer = styled.default.div`
  height: 430px;
  display: flex;
  justify-content: center;
  align-items: center;
`;
