import { IFormField, IFormFieldSC } from './FormField.interface'
import { colors } from '@/styles/variables'
import { fontSize } from '@/styles/utilities'
import styled from 'styled-components'

export const StyledField = styled.input``

export const StyledFieldContainer = styled.div<IFormField | IFormFieldSC>`
  position: relative;
  width: 100%;
  margin-bottom: 2rem;

  ${({ $isCheckRadio }) =>
    !$isCheckRadio
      ? `
      & > div {
        position: relative;
      }

      i {
        position: absolute;
        top: 50%;
        right: 12px;
        margin-top: -10px;
        color: currentColor;

        & + input{
          
        }
        & + select {
          padding-left: 2.8rem;
        }
      }

      label {
        display: block;
      }

      &:has(select) {
        & > div {
          &::after {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            right: 12px;
            width: 16px;
            height: 16px;
            margin: 0 4px;
            margin-top: -8px;
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33333 9.24435L11.016 5.33398L12 6.3788L7.33333 11.334L2.66667 6.3788L3.65065 5.33398L7.33333 9.24435Z' fill='%233C3B39'/%3E%3C/svg%3E%0A");
          }
          & input,
          & select {
            padding-right: 2.6rem;
          }
        }
      }

      input,
      textarea,
      select {
        font-family: inherit;
        ${fontSize('texts')};

        border-radius: 0;
        border: 0;

        padding: 12px;
        background: transparent;
        outline: none;
        width: 100%;

        border-bottom: 1px solid ${colors.primary70};

        &:focus {
          border-bottom: 1px solid ${colors.gray50};
        }

        &::-webkit-input-placeholder {
          opacity: 1;
          color: ${colors.gray70};
          font-weight: inherit;
        }

        &::-moz-placeholder{
          opacity: 1;
          color: ${colors.gray70};
          font-weight: inherit;
        }

        /* firefox 19+ */
        &:-ms-input-placeholder{
          opacity: 1;
          color: ${colors.gray70};
          font-weight: inherit;
        }

        /* ie */
        &:-moz-placeholder {
          opacity: 1;
          color: ${colors.gray70};
          font-weight: inherit;
        }

        // &:-webkit-autofill,
        // &:-webkit-autofill:hover,
        // &:-webkit-autofill:focus,
        // &:-webkit-autofill:active{
        //   -webkit-background-clip: text;
        //   -webkit-text-fill-color: #ffffff;
        //   transition: background-color 5000s ease-in-out 0s;
        //   box-shadow: inset 0 0 20px 20px #23232329;
        // }
      }


      textarea{
        border: 1px solid ${colors.primary70};
        height: 15rem;
      }

      select{
        option{
          color: ${colors.primary70};
        }
      }

      //Clear search X
      input[type="search"]::-webkit-search-decoration,
      input[type="search"]::-webkit-search-cancel-button,
      input[type="search"]::-webkit-search-results-button,
      input[type="search"]::-webkit-search-results-decoration {
        -webkit-appearance: none;
      }

      .style-dark & {
        &:has(select) {
          & > div {
            &::after {
              background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33333 9.24435L11.016 5.33398L12 6.3788L7.33333 11.334L2.66667 6.3788L3.65065 5.33398L7.33333 9.24435Z' fill='%23fff'/%3E%3C/svg%3E%0A");
            }
          }
        }

        i {
          color: ${colors.white};
        }

        & input,
        & textarea,
        & select {
          color: ${colors.white};
          border-color: ${colors.white};
        }
      }
  `
      : `
      & > div{
        display: flex;
        flex-flow: row wrap;
        gap: 1rem;
      }
  `}
`