import React, { useState } from 'react';
import styled from 'styled-components';
export const SelectDrop = ({
  type,
  placeholder,
  label,
  error,
  countries,
  value,
  onchange,
}) => {
  const [key, setkey] = useState(false);
  return /*#__PURE__*/ React.createElement(
    SelectDropWrapper,
    {
      onClick: () => setkey(!key),
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange(value),
        value: value,
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${key ? 'drop-alt' : 'drop'}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null,
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `option-list-wrapper ${key ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'option-list',
        },
        countries && countries.length > 0
          ? countries.map((item, index) =>
              /*#__PURE__*/ React.createElement(
                'li',
                {
                  style: {
                    cursor: 'pointer',
                  },
                  key: index,
                  onClick: () => {
                    onchange(item);
                    setkey(false);
                  },
                  className: value?.name === item?.name ? 'active' : '',
                },
                /*#__PURE__*/ React.createElement(
                  'svg',
                  null,
                  /*#__PURE__*/ React.createElement('use', {
                    href: '/images/icons.svg#check',
                  })
                ),
                /*#__PURE__*/ React.createElement('span', null, item.name)
              )
            )
          : ''
      )
    )
  );
};
const SelectDropWrapper = styled.div`
  position: relative;
  .option-list-wrapper {
    width: 100%;
    position: absolute;
    background: #ffffff;
    box-shadow: 0px 10px 70px #edf0f7;
    border-radius: 4px;
    border: 1px solid #e8edff;
    height: 188px;
    top: 57px;
    left: 0;
    visibility: hidden;
    padding: 1rem 0;
    z-index: 40;
    &.active {
      visibility: visible;
    }

    .option-list {
      height: 100%;
      width: 100%;
      overflow: auto;

      li {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0.8rem 1.5rem;
        font-size: 1.6rem;
        color: #838ca2;
        text-transform: capitalize;
        svg {
          width: 12px;
          height: 12px;
          opacity: 0;
          transition: color 0.3s ease;
        }
        span {
          margin-left: 1.5rem;
        }
        &.active {
          color: #0a1045;
          svg {
            opacity: 1;
          }
        }
        &:hover {
          color: #0a1045;
        }
      }
    }
  }
  .bg-svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    width: 16px;
    height: 16px;
  }

  .error-message {
    font-size: 1.2rem;
    font-family: var(--ff-medium);
    color: var(--co-error);
    line-height: 1.1;
    margin-top: 1rem;
  }
  &.input-error {
    .label {
      color: var(--co-error);
      span {
        opacity: 1;
        transform: translateY(0);
      }
      &:before {
        background: var(--co-error);
        width: 100%;
      }
    }
    .input {
      border-color: var(--co-error);
    }
    .label:before {
      background: var(--co-error);
      width: 100%;
    }

    input:not(:placeholder-shown) ~ .label:before,
    textarea:not(:placeholder-shown) ~ .label:before {
      background: var(--co-error);
      width: 100%;
    }
    .input:focus-within {
      .label {
        opacity: 1;
        border-bottom: none;
      }
      .label:before {
        background: var(--co-error);
        width: 100%;
      }
    }
  }
  &:not(:last-child):not(:only-child) {
    margin-bottom: 4rem;
  }
`;
const Input = styled.div`
  position: relative;
  background: #f1f1f4;
  padding: 1rem 1.8rem;
  z-index: 1;
  .label {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-size: 1rem;
    padding-left: 1.8rem;
    padding-top: 1rem;
    color: var(--co-primary);
    font-family: var(--ff-medium);
    font-weight: 500;
    z-index: -1;
    text-transform: capitalize;
    span {
      display: block;
      position: relative;
      opacity: 0;
      transform: translateY(5px);
      transition: all 0.3s ease-in;
    }
    &:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 0;
      height: 2px;
      transition: width 1s ease;
      z-index: 2;
    }
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 100%;
      height: 2px;
      background: #c5c9da;
    }
  }
  input,
  textarea {
    display: block;
    width: 100%;
    padding-top: 2rem;
  }
  &:focus-within {
    .label span {
      opacity: 1;
      transform: translateY(0);
    }
    .label:before {
      background: var(--co-primary);
      width: 100%;
    }
  }
  input:not(:placeholder-shown) ~ .label span,
  textarea:not(:placeholder-shown) ~ .label span {
    opacity: 1;
    transform: translateY(0);
  }
  input:not(:placeholder-shown) ~ .label:before,
  textarea:not(:placeholder-shown) ~ .label:before {
    background: var(--co-primary);
    width: 100%;
  }
`;
