import React from 'react';
import { icons } from '@/constants.js';
import { StoryFn } from '@storybook/react-webpack5';
import { useState } from 'storybook/preview-api';
import { Icon, FlagIcon, IconProps } from '@foundations/Icons/Icons';
import Search from '@molecules/Search/Search';
import Tooltip from '@atoms/Tooltip/Tooltip';
import Popovers from '@molecules/Popovers/Popovers';


const IconsGrid = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [popoverVisible, setPopoverVisible] = useState(false);
  const [popoverContent, setPopoverContent] = useState('');
  const [popoverTarget, setPopoverTarget] = useState<string | null>(null);

  const handleSearch = (value: string) => {
    setSearchQuery(value);
  };

  const handleIconClick = (name: string) => {
    console.log(`Icon clicked: ${name}`);
    navigator.clipboard.writeText(name).then(() => {
      setPopoverContent(`Copied ${name} to clipboard`);
      setPopoverTarget(name);
      setPopoverVisible(true);
      console.log(`Popover content set: Copied ${name} to clipboard`);
      setTimeout(() => {
        setPopoverVisible(false);
        console.log('Popover hidden');
      }, 2000); // Hide popover after 2 seconds
    });
  };

  const filteredRegularIcons = icons
    ?.find(iconSet => iconSet.type === 'regular')
    ?.names.filter(name => name.toLowerCase().includes(searchQuery.toLowerCase()));

  const filteredFilledIcons = icons
    ?.find(iconSet => iconSet.type === 'filled')
    ?.names.filter(name => name.toLowerCase().includes(searchQuery.toLowerCase()));

  return (
    <div className='icon-swatches'>
        <Search onChange={handleSearch} />
        <h3 className='mt-3'>Filled Icons</h3>
        <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
          {filteredFilledIcons?.map(name => (
            <Tooltip key={name} title={name} containerClassName="tooltip-container">
              <Popovers
                title="Notification"
                component={<div>{popoverContent}</div>}
                backdrop={false}
                trigger="click"
                containerClassName="popover-container"
                show={popoverVisible && popoverTarget === name}
              >
                <div 
                  className="btn swatch btn-muted bg-muted-dark"
                  style={{ color: "white"}}
                  onClick={() => handleIconClick(name)}
                  >
                  <Icon name={name} color='white'/>
                </div>
              </Popovers>
            </Tooltip>
          ))}
        </div>
        <h3 className='mt-3'>Outlined Icons</h3>
        <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
          {filteredRegularIcons?.map(name => (
            <Tooltip key={name} title={name} containerClassName="tooltip-container">
              <Popovers
                title="Notification"
                component={<div>{popoverContent}</div>}
                backdrop={false}
                trigger="click"
                containerClassName="popover-container"
                show={popoverVisible && popoverTarget === name}
              >
                <div 
                  className="btn swatch btn-light bg-light" 
                  onClick={() => handleIconClick(name)}
                  >
                  <Icon name={name}/>
                </div>
              </Popovers>
            </Tooltip>
          ))}
        </div>
    </div>
  );
};

const FlagIconTemplate: StoryFn<IconProps> = (args) => {
  return (
      <FlagIcon {...args} />
  )
}


export default {
  title: 'foundations/Icons',
  component: IconsGrid,
  argTypes: {},
};

export let _Icons = IconsGrid.bind({});

export let _FlagIcons = FlagIconTemplate.bind({
});
_FlagIcons.args = {
  name: "FJ",
  className: 'fs-1 rounded',
};