import React, { useState } from 'react';
import { useEffect } from 'react';
import Select from '../Select/Select';

let States = [
  {
    title: '---Select a  State ---',
    value: '',
    disabled: true,
  },
  {
    title: 'AE',
    value: 'AE',
  },
  {
    title: 'AL',
    value: 'AL',
  },
  {
    title: 'AP',
    value: 'AP',
  },
  {
    title: 'AR',
    value: 'AR',
  },
  {
    title: 'AZ',
    value: 'AZ',
  },
  {
    title: 'CA',
    value: 'CA',
  },
  {
    title: 'CO',
    value: 'CO',
  },
  {
    title: 'CT',
    value: 'CT',
  },
  {
    title: 'DC',
    value: 'DC',
  },
  {
    title: 'DE',
    value: 'DE',
  },
  {
    title: 'FL',
    value: 'FL',
  },
  {
    title: 'GA',
    value: 'GA',
  },
  {
    title: 'HI',
    value: 'HI',
  },
  {
    title: 'IA',
    value: 'IA',
  },
  {
    title: 'ID',
    value: 'ID',
  },
  {
    title: 'IL',
    value: 'IL',
  },
  {
    title: 'IN',
    value: 'IN',
  },
  {
    title: 'KS',
    value: 'KS',
  },
  {
    title: 'KY',
    value: 'KY',
  },
  {
    title: 'LA',
    value: 'LA',
  },
  {
    title: 'MA',
    value: 'MA',
  },
  {
    title: 'MD',
    value: 'MD',
  },
  {
    title: 'ME',
    value: 'ME',
  },
  {
    title: 'MI',
    value: 'MI',
  },
  {
    title: 'MN',
    value: 'MN',
  },
  {
    title: 'MO',
    value: 'MO',
  },
  {
    title: 'MS',
    value: 'MS',
  },
  {
    title: 'MT',
    value: 'MT',
  },
  {
    title: 'NC',
    value: 'NC',
  },
  {
    title: 'ND',
    value: 'ND',
  },
  {
    title: 'NE',
    value: 'NE',
  },
  {
    title: 'NH',
    value: 'NH',
  },
  {
    title: 'NJ',
    value: 'NJ',
  },
  {
    title: 'NM',
    value: 'NM',
  },
  {
    title: 'NV',
    value: 'NV',
  },
  {
    title: 'NY',
    value: 'NY',
  },
  {
    title: 'OH',
    value: 'OH',
  },
  {
    title: 'OK',
    value: 'OK',
  },
  {
    title: 'OR',
    value: 'OR',
  },
  {
    title: 'PA',
    value: 'PA',
  },
  {
    title: 'PR',
    value: 'PR',
  },
  {
    title: 'RI',
    value: 'RI',
  },
  {
    title: 'SC',
    value: 'SC',
  },
  {
    title: 'SD',
    value: 'SD',
  },
  {
    title: 'TN',
    value: 'TN',
  },
  {
    title: 'TX',
    value: 'TX',
  },
  {
    title: 'UT',
    value: 'UT',
  },
  {
    title: 'VA',
    value: 'VA',
  },
  {
    title: 'VI',
    value: 'VI',
  },
  {
    title: 'VT',
    value: 'VT',
  },
  {
    title: 'WA',
    value: 'WA',
  },
  {
    title: 'WV',
    value: 'WV',
  },
  {
    title: 'WI',
    value: 'WI',
  },
  {
    title: 'WY',
    value: 'WY',
  },
];

interface Props {
  populatedValue: string;
  callback: (p: string) => void;
  id?: string;
  name?: string;
  error?: string;
  invalidStates?: Array<string>;
  invalidStateErrorMessage?: string;
}

const StateDropdown = ({ populatedValue, callback, id, name, error, invalidStates, invalidStateErrorMessage }: Props) => {
  const [currentState, setCurrentState] = useState(populatedValue ?? '');
  const [errorMessage, setErrorMessage] = useState(error);
  useEffect(() => {
    setCurrentState(populatedValue);
  }, [populatedValue]);
  return (
    <div>
      <Select
        defaultValue={currentState}
        callback={(e) => {
          setCurrentState(e);
          // setErrorMessage(e.length ? '' : 'State can not be blank');
          if (!e.length) setErrorMessage('Please Select a State Value');
          else if (invalidStates?.length) {
            const validState = !invalidStates.includes(e);
            setErrorMessage(validState ? '' : invalidStateErrorMessage);
          }
          callback(e);
        }}
        fontSize={14}
        options={States}
        padding="10px 30px"
        radius="rounded"
        required
        error={errorMessage}
        id={id}
        name={name}
        title="State"
      />
    </div>
  );
};

export default StateDropdown;