import styled, { css } from 'styled-components';
import { getBorderColor, getCheckRadioIconColor } from './utils.js';
import { convertToTransientProps, getSpacing, getFontSize, getColorAlias, getDarkenColor } from '../../utils/index.js';

const Wrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['noMargin']),
}) `
  position: relative;
  width: ${(props) => (props.width ? props.width : '100%')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  margin: ${(props) => props.noMargin ? getSpacing('s00') : getSpacing('s02', 's00')};
`;
const LabelWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['hasLabel']),
}) `
  display: flex;
  justify-content: ${(props) => props.hasLabel ? 'space-between' : 'flex-end'};
  align-items: center;
  ${getFontSize('size14')};
  color: ${(props) => props.disabled
    ? getColorAlias('contentDisabled')
    : getColorAlias('contentSubdued')};
`;
const Label = styled.label.withConfig({
    shouldForwardProp: convertToTransientProps([
        'hasLabel',
        'hasError',
        'hasFocus',
    ]),
}) `
  font-weight: ${(props) => props.theme.font.weightBold};
  ${getFontSize('size14')};
  margin-bottom: ${getSpacing('s01')};
  padding-right: ${getSpacing('s02')};
  color: ${(props) => props.disabled
    ? getColorAlias('contentDisabled')
    : getColorAlias('contentDefault')};
`;
const Text = styled.span ``;
const Border = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'hasError',
        'hasPrefix',
        'hasSuffix',
    ]),
}) `
  border: 1px solid ${getColorAlias('borderDefault')};
  border-color: ${(props) => getBorderColor(props.disabled, props.hasError)};
  background: ${(props) => props.disabled
    ? getColorAlias('disabled01')
    : getColorAlias('containerDefault')};
  border-radius: ${(props) => props.theme.radius.roundedC};
  display: flex;
  align-items: center;
  padding-left: ${(props) => (props.hasPrefix ? '16px' : '0')};
  padding-right: ${(props) => (props.hasSuffix ? '16px' : '0')};

  &:hover {
    background: ${(props) => props.disabled
    ? getColorAlias('disabled01')
    : getDarkenColor('hover02', 'containerDefault')};
    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'auto')};
  }

  &:focus,
  &:focus-within,
  &:focus-visible {
    background: ${getColorAlias('containerDefault')};
    ${(props) => !props.hasError &&
    css `
        box-shadow: 0 0 0 2px ${getColorAlias('focusOuter')};
      `};
  }
`;
const SupportingText = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['noMargin']),
}) `
  ${getFontSize('size14')};
  color: ${getColorAlias('contentSubdued')};
  margin-top: ${(props) => getSpacing(props.noMargin ? 's00' : 's01')};

  svg {
    margin-right: ${getSpacing('s02')};
  }
`;
const AssistMessage = styled.span `
  margin: 0;
`;
const ErrorMessage = styled.div `
  display: flex;
  align-items: center;
  color: ${getColorAlias('contentError')};
  margin: ${getSpacing('s01', 's00', 's03')};
  ${getFontSize('size14')};
  font-weight: ${(props) => props.theme.font.weightRegular};
  svg {
    fill: ${getColorAlias('contentError')};
    height: 20px;
    margin-right: 8px;
  }
`;
const CheckRadioWrapper = styled.div `
  display: flex;
  flex-flow: row;
  align-items: flex-start;

  input,
  label {
    cursor: pointer;
  }
`;
const CheckRadioInput = styled.input.withConfig({
    shouldForwardProp: convertToTransientProps(['hasError']),
}) `
  --outline-color: transparent;
  --check-radio-bg-color: transparent;
  --border-color: ${({ hasError }) => hasError
    ? getColorAlias('supportError')
    : getColorAlias('interactiveForm')};

  &[type='radio'],
  &[type='checkbox'] {
    transition: all 0.2s linear;
    margin: 0;
    appearance: none;
    background-color: var(--check-radio-bg-color);
    border: 1px solid var(--border-color);
    outline: 2px solid var(--outline-color);
    outline-offset: 1px;
    background-repeat: no-repeat;
  }

  &[type='radio'] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-height: 22px;
    border-radius: 50%;
    background-position: center;
    background-size: ${getSpacing('s04')};

    &:checked {
      background-image: ${({ disabled }) => {
    const iconColor = getCheckRadioIconColor(disabled);
    return `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23${iconColor}'/%3e%3c/svg%3e")`;
}};
    }
  }

  &[type='checkbox'] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-height: 20px;
    border-radius: 2px;

    &:checked {
      background-image: ${({ disabled }) => {
    const iconColor = getCheckRadioIconColor(disabled);
    return `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23${iconColor}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")`;
}};
    }

    &:indeterminate {
      background-image: ${({ disabled }) => {
    const iconColor = getCheckRadioIconColor(disabled);
    return `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23${iconColor}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")`;
}};
    }
  }

  &:hover {
    --check-radio-bg-color: ${getDarkenColor('hover01', 'containerSubtle')};
  }

  &:checked,
  &[type='checkbox']:indeterminate {
    ${({ hasError }) => hasError
    ? css `
            --check-radio-bg-color: ${getColorAlias('supportError')};
            --border-color: ${getColorAlias('supportError')};
          `
    : css `
            --check-radio-bg-color: ${getColorAlias('interactiveBrand')};
            --border-color: ${getColorAlias('interactiveBrand')};
          `}
  }

  &:checked:hover {
    ${({ hasError }) => hasError
    ? css `
            --check-radio-bg-color: ${getDarkenColor('hover01', 'supportError')};
          `
    : css `
            --check-radio-bg-color: ${getDarkenColor('hover01', 'interactiveBrand')};
          `}
  }

  &:disabled,
  &:checked:hover:disabled,
  &[type='checkbox']:indeterminate:disabled {
    --check-radio-bg-color: ${getColorAlias('disabled01')};
    --border-color: ${getColorAlias('disabled01')};
  }

  &:active {
    --check-radio-bg-color: ${getDarkenColor('active01', 'containerSubtle')};
    --border-color: ${getDarkenColor('active01', 'containerSubtle')};
  }

  &:checked:active,
  &[type='checkbox']:checked:indeterminate:active {
    --check-radio-bg-color: ${getDarkenColor('active01', 'interactiveBrand')};
    --border-color: ${getDarkenColor('active01', 'interactiveBrand')};
  }

  &:focus,
  &:focus-visible,
  &:focus-within {
    --outline-color: ${getColorAlias('focusOuter')};
  }
`;
const CheckRadioInputGroupWrapper = styled.div `
  display: flex;
  flex-flow: column;
`;
const CheckRadioLabel = styled.label `
  ${getFontSize('size16')};
  margin-left: ${getSpacing('s02')};
  color: ${getColorAlias('contentDefault')};
`;
const CheckRadioHintArea = styled.span `
  ${getFontSize('size14')};
  color: ${getColorAlias('contentDefault')};
  display: flex;
  align-items: center;
  margin-top: ${getSpacing('s02')};
`;
const CheckRadioErrorArea = styled(CheckRadioHintArea) `
  color: ${getColorAlias('contentError')};

  svg {
    width: 17px;
    height: 17px;
    margin-right: ${getSpacing('s02')};
    fill: ${getColorAlias('contentError')};
  }
`;
const CheckRadioGroupWrapper = styled.div `
  display: flex;
  flex-flow: ${({ orientation }) => orientation};

  & ${CheckRadioWrapper} {
    &:not(:last-child) {
      ${({ orientation }) => orientation === 'row'
    ? css `
              margin-right: ${getSpacing('s05')};
            `
    : css `
              margin-bottom: ${getSpacing('s03')};
            `}
    }
  }
`;
const CheckRadioGroupLabel = styled.label `
  ${getFontSize('size14')};
  color: ${getColorAlias('contentDefault')};
  font-weight: 700;
  margin-bottom: ${getSpacing('s03')};
`;

export { AssistMessage, Border, CheckRadioErrorArea, CheckRadioGroupLabel, CheckRadioGroupWrapper, CheckRadioHintArea, CheckRadioInput, CheckRadioInputGroupWrapper, CheckRadioLabel, CheckRadioWrapper, ErrorMessage, Label, LabelWrapper, SupportingText, Text, Wrapper };
