import React from 'react';
import { Select } from 'antd';
import { SocialHandleDropdownItem } from '../../../types/config-section';
import { NEXT_PUBLIC_API_HOST } from '../../../utils/apis';
import { OTHER_SOCIAL_HANDLE_OPTION } from './constants';

interface DropdownProps {
  iconList: SocialHandleDropdownItem[];
  selectedOption: string;
  onSelected: any;
}

export default function SocialDropdown({ iconList, selectedOption, onSelected }: DropdownProps) {
  const handleSelected = value => {
    if (onSelected) {
      onSelected(value);
    }
  };
  const inititalSelected = selectedOption === '' ? null : selectedOption;
  return (
    <div className="social-dropdown-container">
      <p className="">
        If you are looking for a platform name not on this list, please select Other and type in
        your own name. A logo will not be provided.
      </p>
      <p className="">
        If you DO have a logo, drop it in to the <code>/webroot/img/platformicons</code> directory
        and update the <code>/socialHandle.go</code> list. Then restart the server and it will show
        up in the list.
      </p>

      <Select
        style={{ width: 240 }}
        className="social-dropdown"
        placeholder="Social platform..."
        defaultValue={inititalSelected}
        value={inititalSelected}
        onSelect={handleSelected}
      >
        {iconList.map(item => {
          const { platform, icon, key } = item;
          return (
            <Select.Option className="social-option" key={`platform-${key}`} value={key}>
              <span className="option-icon">
                <img src={`${NEXT_PUBLIC_API_HOST}${icon}`} alt="" className="option-icon" />
              </span>
              <span className="option-label">{platform}</span>
            </Select.Option>
          );
        })}
        <Select.Option
          className="social-option"
          key={`platform-${OTHER_SOCIAL_HANDLE_OPTION}`}
          value={OTHER_SOCIAL_HANDLE_OPTION}
        >
          Other...
        </Select.Option>
      </Select>
    </div>
  );
}