import React, { useState } from 'react';
import { connect } from '@formily/react-schema-renderer';
import { Input } from 'antd';
import { PasswordProps } from 'antd/lib/input';
import { PasswordStrength } from '@formily/react-shared-components';
import styled from 'styled-components';
import { mapStyledProps } from '../shared';

export interface IPasswordProps extends PasswordProps {
  checkStrength: boolean;
}

export const Password = connect({
  getProps: mapStyledProps,
})(styled((props: IPasswordProps) => {
  const { value, className, checkStrength, onChange, ...others } = props;

  return (
    <span className={className}>
      <Input.Password
        autoComplete={'new-password'}
        {...others}
        value={value}
        onChange={e => {
          // 密码字段，如果没有设置不处理
          onChange(e.target.value ? e : undefined);
        }}
      />
      {checkStrength && (
        <PasswordStrength value={String(value)}>
          {score => {
            return (
              <div className="password-strength-wrapper">
                <div className="div-1 div" />
                <div className="div-2 div" />
                <div className="div-3 div" />
                <div className="div-4 div" />
                <div
                  className="password-strength-bar"
                  style={{
                    clipPath: `polygon(0 0,${score}% 0,${score}% 100%,0 100%)`,
                  }}
                />
              </div>
            );
          }}
        </PasswordStrength>
      )}
    </span>
  );
})`
  .password-strength-wrapper {
    background: #e0e0e0;
    margin-bottom: 3px;
    position: relative;
    .div {
      position: absolute;
      z-index: 1;
      height: 8px;
      top: 0;
      background: #fff;
      width: 1px;
      transform: translate(-50%, 0);
    }
    .div-1 {
      left: 20%;
    }
    .div-2 {
      left: 40%;
    }
    .div-3 {
      left: 60%;
    }
    .div-4 {
      left: 80%;
    }
    .password-strength-bar {
      position: relative;
      background-image: -webkit-linear-gradient(left, #ff5500, #ff9300);
      transition: all 0.35s ease-in-out;
      height: 8px;
      width: 100%;
      margin-top: 5px;
    }
  }
`);

export default Password;