/* eslint max-len: 0 */
import React from 'react';
import {storiesOf} from '@storybook/react';
import {select, object} from '@storybook/addon-knobs';
import {ThemeProvider} from 'styled-components';
import {
  COLOR,
  SIZE,
  Add,
  AirlineStops,
  AddCircle,
  AddFiled,
  AmericanExpress,
  Announcement,
  Archive,
  ArrowDown,
  ArrowDownFull,
  ArrowLeft,
  ArrowPageFirst,
  ArrowPageLast,
  ArrowRight,
  ArrowRightFull,
  ArrowUp,
  ArrowUpFull,
  Assistance,
  Bank,
  Bell,
  Block,
  BorderAll,
  Build,
  Burger,
  AutoRenew,
  Cancel,
  Card,
  Case,
  Check,
  CheckCircle,
  Chrome,
  ChromeColored,
  CircleNotification,
  Close,
  Code,
  Columns,
  Copy,
  Comment,
  Crop,
  Crown,
  Cup,
  Date,
  Delete,
  DeleteForever,
  Desktop,
  Diamond,
  Download,
  Draggable,
  Ebanx,
  Edit,
  Error,
  Eye,
  Epayments,
  Facebook,
  Favorite,
  File,
  Filter,
  FilterList,
  Fingerprint,
  Fire,
  FlightUp,
  Forth,
  Funnel,
  Gamepad,
  Geo,
  GiftBox,
  HourGlass,
  Http,
  InfinityIcon,
  Info,
  InfoOutline,
  Insert,
  Instagram,
  Lamp,
  LineChart,
  Link,
  Linkedin,
  LocalAtm,
  Lock,
  LockOpen,
  LogOut,
  LpViews,
  Language,
  Mail,
  MailFilled,
  ManageHistory,
  MissedCall,
  Monetization,
  Money,
  MoreHorizontal,
  MoreVertical,
  NoMoney,
  Offer,
  OfferFilled,
  OnlinePrediction,
  OpenInNew,
  Pause,
  Paypal,
  Pdf,
  People,
  Phone,
  PhotoCamera,
  Pie,
  PieOutline,
  Play,
  PlayCircleFilled,
  Pop,
  Postback,
  Present,
  PrivacyTip,
  Propeller,
  Push,
  Qiwi,
  QrCode,
  Question,
  QuestionMark,
  Receipt,
  Refresh,
  SaveAs,
  Search,
  Segment,
  Sent,
  Settings,
  Shield,
  ShoppingBag,
  ShoppingCart,
  Site,
  Skrill,
  Skype,
  Smile,
  SnowFlake,
  SpeedFast,
  Star,
  Stat,
  Stop,
  Support,
  SwipeDown,
  Tablet,
  Target,
  Telegram,
  Tell,
  ThumbUp,
  Time,
  Twitter,
  Touch,
  Update,
  Upload,
  User,
  UserAdd,
  Users,
  Vk,
  Wallet,
  Warning,
  Webmoney,
  Wordpress,
  YandexMoney,
  Verified, LaughingSmile, SurveyOffer,
} from '../../Components/Icon/src';
import iconNote from '../../Components/Icon/README.md';

const iconsList = [
  <Add />,
  <AddCircle />,
  <AddFiled />,
  <AirlineStops />,
  <AmericanExpress />,
  <Announcement />,
  <Archive />,
  <ArrowDown />,
  <ArrowDownFull />,
  <ArrowPageFirst />,
  <ArrowLeft />,
  <ArrowPageLast />,
  <ArrowRight />,
  <ArrowRightFull />,
  <ArrowUp />,
  <ArrowUpFull />,
  <Assistance />,
  <AutoRenew />,
  <Bank />,
  <Bell />,
  <Block />,
  <BorderAll />,
  <Build />,
  <Burger />,
  <Cancel />,
  <Card />,
  <Case />,
  <Check />,
  <CheckCircle />,
  <Chrome />,
  <ChromeColored />,
  <CircleNotification />,
  <Close />,
  <Code />,
  <Columns />,
  <Copy />,
  <Comment />,
  <Crop />,
  <Crown />,
  <Cup />,
  <Date />,
  <Download />,
  <Draggable />,
  <Delete />,
  <DeleteForever />,
  <Desktop />,
  <Diamond />,
  <Ebanx />,
  <Edit />,
  <Error />,
  <Eye />,
  <Epayments />,
  <Facebook />,
  <File />,
  <Filter />,
  <FilterList />,
  <Fingerprint />,
  <Fire />,
  <FlightUp />,
  <Forth />,
  <Funnel />,
  <Gamepad />,
  <Geo />,
  <GiftBox />,
  <HourGlass />,
  <Http />,
  <InfinityIcon />,
  <Info />,
  <InfoOutline />,
  <Insert />,
  <Instagram />,
  <Lamp />,
  <Favorite />,
  <LineChart />,
  // eslint-disable-next-line jsx-a11y/anchor-is-valid
  <Link />,
  <Linkedin />,
  <LocalAtm />,
  <Lock />,
  <LockOpen />,
  <LogOut />,
  <LpViews />,
  <Language />,
  <LaughingSmile/>,
  <Mail />,
  <MailFilled />,
  <ManageHistory />,
  <MissedCall />,
  <Monetization />,
  <Money />,
  <MoreHorizontal />,
  <MoreVertical />,
  <NoMoney />,
  <Offer />,
  <OfferFilled />,
  <OnlinePrediction />,
  <OpenInNew />,
  <Pause />,
  <Paypal />,
  <Pdf />,
  <People />,
  <Phone />,
  <PhotoCamera />,
  <Pie />,
  <PieOutline />,
  <Play />,
  <PlayCircleFilled />,
  <Pop />,
  <Postback />,
  <Present />,
  <PrivacyTip />,
  <Propeller />,
  <Push />,
  <Qiwi />,
  <QrCode />,
  <Question />,
  <QuestionMark />,
  <Receipt />,
  <Refresh />,
  <SaveAs />,
  <Search />,
  <Segment />,
  <Sent />,
  <Settings />,
  <Shield />,
  <ShoppingBag />,
  <ShoppingCart />,
  <Site />,
  <Skrill />,
  <Skype />,
  <Smile />,
  <SnowFlake />,
  <SpeedFast />,
  <Star />,
  <Stat />,
  <Stop />,
  <Support />,
  <SurveyOffer/>,
  <SwipeDown />,
  <Tablet />,
  <Target />,
  <Telegram />,
  <Tell />,
  <ThumbUp />,
  <Time />,
  <Touch />,
  <Twitter />,
  <Update />,
  <Upload />,
  <User />,
  <UserAdd />,
  <Users />,
  <Verified />,
  <Vk />,
  <Wallet />,
  <Warning />,
  <Webmoney />,
  <Wordpress />,
  <YandexMoney />,
];

export default storiesOf('Components | Icon', module)
  .add('default', () => (
    <ThemeProvider
      theme={object('colors', {
        actionColor: {
          main: '',
        },
        successColor: {
          main: '',
        },
        errorColor: {
          main: '',
        },
        warningColor: {
          main: '',
        },
      })}
    >
      <div
        style={{
          display: 'grid',
          gridAutoFlow: 'column',
          gridTemplateColumns: '180px 180px 180px 180px 180px',
          gridTemplateRows: '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
        }}
      >
        {iconsList.map((icon) => (
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
            }}
            key={`icon-wrapper-${icon.type.name}`}
          >
            {React.cloneElement(icon, {
              key: `icon-wrapper-${icon.type.name}-item`,
              color: select('Color', COLOR, COLOR.GRAY),
              hoverColor: select('Hover color', COLOR, COLOR.ERROR),
              size: select('Size', SIZE, SIZE.MEDIUM),
            })}

            <code
              style={{
                paddingLeft: '8px',
              }}
            >
              {icon.type.name}
            </code>
          </div>
        ))}
      </div>
    </ThemeProvider>
  ),
  {
    notes: iconNote,
  });