import { Story, Meta } from '@storybook/react';

import map from 'lodash/map';

import { ASSETS_URL } from '../../consts/common';
import { countryCodesMap } from '../../consts';

import { ClientImage } from './client-image';
import type { ClientImageProps } from './types';

const mockClientsData = [
  {
    name: 'ingrammicro',
    content: {
      src: `${ASSETS_URL}/icons/icon_msp.svg`,
      title: 'Ingram Micro Inc',
      subtitle: 'Partner'
    },
    default: true
  },
  {
    name: 'hpjewels',
    content: {
      src: 'https://www.google.com/s2/favicons?domain=https://www.hydeparkjewelers.com',
      title: 'Hyde Park Jewelers',
      subtitle: 'Client'
    }
  },
  {
    name: 'tcgsolutions',
    content: {
      src: 'https://www.google.com/s2/favicons?domain=http://tcgsolutions.pro',
      title: 'TCG Solutions',
      subtitle: 'Partner'
    }
  },
  {
    name: 'lonestar',
    content: {
      src: 'https://www.google.com/s2/favicons?domain=http://www.lonestarcontainer.com',
      title: 'Lonestar Container',
      subtitle: 'Client'
    }
  },
  {
    name: 'timco',
    content: {
      src: 'https://www.google.com/s2/favicons?domain=http://timcoblastingandcoating.com',
      title: 'Timco Blasting & Coatings',
      subtitle: 'Partner'
    }
  },
  {
    name: 'bearcreektech',
    content: {
      src: 'https://www.google.com/s2/favicons?domain=http://bearcreektech.com',
      title: 'Bear Creek Technologies, LLC',
      subtitle: 'Partner'
    }
  },
  {
    name: 'i4dmllc',
    content: {
      src: 'https://www.google.com/s2/favicons?domain=http://i4dm.com',
      title: 'I4DM',
      subtitle: 'Partner'
    }
  },
  {
    name: 'maritime',
    content: {
      src: 'https://www.google.com/s2/favicons?domain=https://maritimepartnersllc.com',
      title: 'Maritime Partners',
      subtitle: 'Client'
    }
  },
  {
    name: 'luma-institute',
    content: {
      src: 'https://www.google.com/s2/favicons?domain=https://www.luma-institute.com',
      title: 'Luma Institute',
      subtitle: 'Client'
    }
  },
  {
    name: 'chiavettas',
    content: {
      src: 'https://www.google.com/s2/favicons?domain=https://www.chiavettascatering.com',
      title: "Chiavetta's",
      subtitle: 'Client'
    }
  }
];

export default {
  component: ClientImage,
  title: 'Layout/MSP Display/ClientImage',
  argTypes: {
    label: {
      description: 'The label of the input.'
    },
    placeholder: {
      description: 'The short hint displayed in the input before the user enters a value.'
    },
    value: {
      description: 'The input value. Providing an empty string will select no options.',
      options: [undefined, ...mockClientsData.map(m => m.name)],
      defaultValue: undefined,
      controls: {
        type: 'select'
      }
    },
    menuContentProps: {
      description: 'Props which will be passed into the menu content component.'
    },
    handleSelectClickCB: {
      description: 'A callback function to handle a select field click.'
    },
    controlled: {
      description: 'Make Client Picker value controlled',
      type: 'boolean',
      defaultValue: false
    }
  }
} as Meta;

const Template: Story<ClientImageProps> = args => {
  return <ClientImage {...args} />;
};

export const Primary = Template.bind({});
Primary.args = {
  controlled: false,
  label: '',
  placeholder: '',
  value: undefined,
  menuContentProps: {
    ariaLabel: 'List of Organizations',
    bottomButtonText: 'Add a New Organization',
    bottomButtonProps: {
      startIconUrl: `${ASSETS_URL}/icons/icon_plus.svg`,
      onClick: () => alert('Callback')
    },
    searchPlaceholder: 'Search',
    listItems: map(mockClientsData, item => {
      return {
        ...item,
        value: item.name
      };
    }),
    noResultsText: 'Not found',
    handleClick: (name, value) => () => alert(`Callback: Selected company name "${name}"`)
  },
  width: 200,
  parentChildrenSpace: true
};

export const Countries = Template.bind({});
Countries.args = {
  label: '',
  placeholder: '',
  value: 'IL',
  menuContentProps: {
    ariaLabel: 'List of Countries',
    searchDebounceTime: 400,
    searchPlaceholder: 'Search',
    listItems: map(countryCodesMap, item => {
      const itemName = item.code.toString();
      const countryData = countryCodesMap[item.code];
      const countryFlag = countryData?.flag || 'worldwide';
      const countryFlagSrc = `${ASSETS_URL}/flags/${countryFlag}.svg`;
      return {
        name: itemName,
        value: itemName,
        content: {
          src: countryFlagSrc,
          title: countryData?.name,
          subtitle: `${countryData?.flag} (${itemName})`
        }
      };
    }),
    noOptionsText: 'No options',
    noResultsText: 'No results',
    handleClick: (name, value) => () => alert(`Callback: Selected country code "${name}"`)
  },
  width: 200,
  parentChildrenSpace: false
};