import Button from "../components/Button";
import Tag from "../components/Tag";
import Counter from "../components/Counter";
import Input from "../components/Input";
import Search from "../components/Search";
import SearchWidthSuggest from "../components/search-with-suggest";
import Radio from "../components/Radio";
import Checkbox from "../components/Checkbox";
import SelectRadio from "../components/SelectRadio";
import SelectCheckbox from "../components/SelectCheckbox";
import Switch from "../components/Switch";
import VerticalExpandableProductFilter from "../components/VerticalExpandableProductFilter";
import SidebarCategoryHover from "../components/SidebarCategoryHover";
import Slider from "../components/Slider";
import Range from "../components/Range";
import Alert from "../components/Alert";
import Toast from "../components/Toast";
import StarRating from "../components/StarRating";
import Chart from "../components/Recharts";
import CircularProgressbar from "../components/CircularProgressbar";
import Stepper from "../components/Stepper";
import Product from "../components/Product";
import Navbar from "../components/Navbar";
import SimpleCalendar from '../components/Calendar';
import Footer from "../components/Footer";
import SimpleDatePicker from "../components/SimpleDatePicker";
import RangeDatePicker from '../components/RangeDatePicker';
import Comments from "../components/Comments";
import Feedback from "../components/Feedback";
import Features from '../components/Features';
import Blogs from "../components/Blogs";
import ProductSuggestion from "../components/ProductSuggestion";

const components = [
  {
    name: "Button",
    author: "Andalib",
    props: [],
    content: {
      name: "Button",
      component: <Button buttonBgColor="bg-blue-500" />,
      code: null,
    },
  },
  {
    name: "Tag",
    author: "Andalib",
    props: [],
    content: {
      name: "Tag",
      component: <Tag />,
      code: null,
    },
  },
  {
    name: "Input",
    author: "Ashrafi",
    props: [
      {
        name: "maxLength",
        type: "string",
        required: "false",
        description: "بیشترین تعداد کاراکتری که میتوان استفاده کرد.",
        defaultValue: "",
      },
      {
        name: "lang",
        type: "string",
        required: "false",
        description: "زبان سایت",
        defaultValue: "fa",
      },
      {
        name: "inputMode",
        type: "string",
        required: "false",
        description: "با تعیین این مقدار نوع کیبرد مشخص میشود.",
        defaultValue: "text",
      },
      {
        name: "label",
        type: "string",
        required: "false",
        description: "",
        defaultValue: "label",
      },
    ],
    content: {
      name: "Input",
      component: <Input />,
      code: `import React, { useState } from "react";
      import _ from "lodash";
      import "./index.scss";
      
      import tick from "./tick.png";
      import danger from "./danger.png";
      
      const langDetector = (lang, option1, option2) => {
        return lang === "fa" ? option1 : option2;
      };
      
      const inputStatusHandler = (value, focus, status, primary, success, danger) => {
        if (!focus) {
          return "";
        } else {
          if (!value) {
            return primary;
          } else {
            if (status) {
              return success;
            } else {
              return danger;
            }
          }
        }
      };
      
      export default function Input(props) {
        const [value, setValue] = useState("");
        const [focusToggle, setFocusToggle] = useState(false);
      
        const { lang, theme, inputMode, label, status, maxLength, message } = props;
      
        const onChange = (val) => {
          setValue(val);
        };
      
        return (
          <div
            className={_.join(
              ["input flex flex-col relative my-2", langDetector(lang, "fa", "en")],
              " "
            )}
          >
            <label
              className={_.join(
                [
                  "absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white px-2 text-xs transition-all duration-300",
                  langDetector(lang, "right-2", "left-2"),
                  inputStatusHandler(
                    value,
                    focusToggle,
                    status,
                    "input__labelFocus",
                    "input__labelSuccess",
                    "input__labelDanger"
                  ),
                ],
                " "
              )}
              onClick={() => setFocusToggle(true)}
            >
              {label}
            </label>
            <input
              type="text"
              inputMode={inputMode}
              className={_.join(
                [
                  "flex-1 border rounded-md outline-none p-2",
                  inputStatusHandler(
                    value,
                    focusToggle,
                    status,
                    "input__inputActive",
                    "input__inputSuccess",
                    "input__inputDanger"
                  ),
                  "transition",
                ],
                " "
              )}
              onChange={(e) => onChange(e.target.value)}
              value={value}
              onFocus={() => setFocusToggle(true)}
              onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)}
              maxLength={maxLength}
            />
            {!status && value && (
              <img
                src={danger}
                alt={langDetector(lang, "اشتباه", "wrong")}
                className={_.join(
                  [
                    "w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
                    langDetector(lang, "left-2", "right-2"),
                  ],
                  " "
                )}
              />
            )}
            {status && value && (
              <img
                src={tick}
                alt={langDetector(lang, "درست", "right")}
                className={_.join(
                  [
                    "w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
                    langDetector(lang, "left-2", "right-2"),
                  ],
                  " "
                )}
              />
            )}
      
            {value && !status && (
              <span
                className={_.join(
                  [
                    "input__message text-xs absolute -bottom-5",
                    langDetector(lang, "right-2", "left-2"),
                    inputStatusHandler(
                      value,
                      focusToggle,
                      status,
                      "",
                      "input__messageSuccess",
                      "input__messageDanger"
                    ),
                    "transition",
                  ],
                  " "
                )}
              >
                {message}
              </span>
            )}
            {value && (
              <span
                className={_.join(
                  [
                    "input__length absolute -bottom-5 text-xs",
                    langDetector(lang, "left-2", "right-2"),
                    inputStatusHandler(
                      value,
                      focusToggle,
                      status,
                      "",
                      "input__lengthSuccess",
                      "input__lengthDanger"
                    ),
                    "transition",
                  ],
                  " "
                )}
              >
                {value.length + "/" + maxLength}
              </span>
            )}
          </div>
        );
      }
      
      Input.defaultProps = {
        lang : 'fa',
        inputMode : 'string',
        label : '',
        status : '',
        maxLength : '',
        message : '',
      }`,
    },
  },
  {
    name: "Search",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Search",
      component: <Search />,
      code: null,
    },
  },
  {
    name: "Search with suggestion",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Search with suggestion",
      component: <SearchWidthSuggest />,
      code: null,
    },
  },
  {
    name: "Radio",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Radio",
      component: <Radio />,
      code: null,
    },
  },
  {
    name: "Checkbox",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Checkbox",
      component: <Checkbox />,
      code: null,
    },
  },
  {
    name: "Select box - Radio",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Select box - Radio",
      component: <SelectRadio />,
      code: null,
    },
  },
  {
    name: "Select box - Checkbox",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Select box - Checkbox",
      component: <SelectCheckbox />,
      code: null,
    },
  },
  {
    name: "Switch",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Switch",
      component: <Switch />,
      code: null,
    },
  },
  {
    name: "Expandable products filter",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Expandable products filter",
      component: <VerticalExpandableProductFilter />,
      code: null,
    },
  },
  {
    name: "Sidebar catergory",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Sidebar category",
      component: <SidebarCategoryHover />,
      code: null,
    },
  },
  {
    name: "Slider",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Slider",
      component: <Slider />,
      code: null,
    },
  },
  {
    name: "Range",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Range",
      component: <Range />,
      code: null,
    },
  },
  {
    name: "Counter",
    author: "Andalib",
    props: [],
    content: {
      name: "Counter",
      component: <Counter />,
      code: null,
    },
  },
  {
    name: "Alert",
    author: "Andalib",
    props: [],
    content: {
      name: "Alert",
      component: <Alert />,
      code: null,
    },
  },
  {
    name: "Toast",
    author: "Andalib",
    props: [],
    content: {
      name: "Toast",
      component: <Toast />,
      code: null,
    },
  },
  {
    name: "Star rating",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Star rating",
      component: <StarRating />,
      code: null,
    },
  },
  {
    name: "Chart",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Chart",
      component: <Chart />,
      code: null,
    },
  },
  {
    name: "Circular progressbar",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Circular progressbar",
      component: <CircularProgressbar />,
      code: null,
    },
  },
  {
    name: "Stepper",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Stepper",
      component: <Stepper />,
      code: null,
    },
  },
  {
    name: "Product",
    author: "Andalib",
    props: [],
    content: {
      name: "Product",
      component: <Product />,
      code: null,
    },
  },
  {
    name : "SimpleCalendar",
    author: "Keshavarzi",
    props : [

    ],
    content : {
      name : "SimpleCalendar",
      component : <SimpleCalendar />,
      code : null,
    }
  },
  {
    name: "Navbar",
    author: "Andalib",
    props: [],
    content: {
      name: "Navbar",
      component: <Navbar />,
      code: null,
    },
  },
  {
    name: "Footer",
    author: "Andalib",
    props: [],
    content: {
      name: "Footer",
      component: <Footer />,
      code: null,
      
    },
  },
  {
    name: "SimpleDatePicker",
    author: "Keshavarzi",
    props: [],
    content: {
      name: "SimpleDatePicker",
      component: <SimpleDatePicker />,
      code: null,
    },
  },
  {
    name: "RangeDatePicker",
    author: "Keshavarzi",
    props: [],
    content: {
      name: "RangeDatePicker",
      component: <div className="flex items-center justify-center w-full my-2"><RangeDatePicker /></div>,
      code: null,
    },
  },
  {
    name: "Comments",
    author: "Ashrafi",
    props: [],
    content: {
      name: "Comments",
      component: <Comments />,
      code: null,
    },
  },
  {
    name: "Feedback",
    author: "Andalib",
    props: [],
    content: {
      name: "Feedback",
      component: <Feedback />,
      code: null,
    },
  },
  {
    name: "Features",
    author: "Andalib",
    props: [],
    content: {
      name: "Features",
      component: <Features />,
      code: null,
    },
  },
  {
    name: "Blogs",
    author: "Andalib",
    props: [],
    content: {
      name: "Blogs",
      component: <Blogs />,
      code: null,
    },
  },
  {
    name: "Product Suggestion",
    author: "Andalib",
    props: [],
    content: {
      name: "Product Suggestion",
      component: <ProductSuggestion />,
      code: null,
    },
  },
];

export default components;