import React, { useState } from "react";
import Button from "../../Components/Button/";
import ButtonSpinner from "../../Components/ButtonSpinner";
import Link from "../../Components/Link";
import {
  useTheme,
  Switch,
  Checkbox,
  FormControl,
  FormLabel,
  FormControlLabel,
  Radio,
  RadioGroup,
  Tab,
  Tabs,
  Typography,
  Stack,
  Box,
} from "@mui/material";
import { ColoredLabel, StatusLabel } from "../../Components/Label/";
import Avatar from "../../Components/Avatar/";
import ProgressStepper from "../../Components/ProgressStepper";
import avatarImage from "../../assets/Images/avatar_placeholder.png";
import Section from "../../Components/Section";
import { DataGrid } from "@mui/x-data-grid";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import AddIcon from "@mui/icons-material/Add";
import Divider from "@mui/material/Divider";
import UploadIcon from "@mui/icons-material/Upload";
import SendIcon from "@mui/icons-material/Send";
import ImageIcon from "@mui/icons-material/Image";

// Redux
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { getMonitors } from "../../Features/Monitors/monitorsSlice";
import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
import ImageField from "../../Components/TextFields/Image";
import ProgressUpload from "../../Components/ProgressBars";
import Alert from "../../Components/Alert";
import { createToast } from "../../Utils/toastUtils";
import { ToastContainer } from "react-toastify";

const cols = [
  {
    field: "name",
    headerName: "Name",
    renderCell: (params) => {
      return (
        <div style={{ display: "flex", alignItems: "center" }}>
          <Avatar
            src={params.value.avatarImage}
            firstName={params.value.firstName}
            lastName={params.value.lastName}
          />
          <div style={{ marginLeft: "1rem" }}>
            {params.value.firstName} {params.value.lastName}
          </div>
        </div>
      );
    },
    flex: 1,
  },
  {
    field: "status",
    headerName: "Status",
    renderCell: (params) => {
      return <StatusLabel status={params.value} />;
    },
    flex: 1,
  },
  { field: "role", headerName: "Role", flex: 1 },
  { field: "team", headerName: "Team", flex: 1 },
  { field: "hireDate", headerName: "Hire date", flex: 1 },
];

const rows = ((count) => {
  const arr = [];
  for (let i = 0; i < count; i++) {
    let row = {
      id: i,
      name: {
        avatarImage: i % 2 === 0 ? avatarImage : null,
        firstName: "Placeholder Name",
        lastName: i.toString(),
      },
      status: "Active",
      role: "Product Designer",
      team: "Marketing",
      hireDate: new Date().toLocaleDateString(),
    };
    arr.push(row);
  }
  return arr;
})(100);

const steps = [
  { label: "Your details", content: "Please provide your name and email" },
  { label: "Company details", content: "A few details about your company" },
  { label: "Invite your team", content: "Start collaborating with your team" },
];

const demoMonitors = [
  { id: 0, name: "Google", isActive: true },
  { id: 1, name: "Yahoo", isActive: false },
  { id: 2, name: "Reddit", isActive: true },
];

const Demo = () => {
  const dispatch = useDispatch();

  const [radio, setRadio] = React.useState(1);
  const [tab, setTab] = React.useState("departments");
  const [date, setDate] = React.useState("Pick a date!");

  const handleRadio = (event) => {
    setRadio(event.target.value);
  };

  const handleTab = (event, newValue) => {
    setTab(newValue);
  };

  const handleDate = (newValue) => {
    setDate(newValue.toString());
  };

  const change = (event, type) => {
    alert(event.target.checked ? `${type} checked` : `${type} unchecked`);
  };

  const links = [
    {
      name: "Buttons",
      url: "#buttons",
    },
    {
      name: "Disabled Buttons",
      url: "#disabled-buttons",
    },
    {
      name: "Labels",
      url: "#labels",
    },
    {
      name: "Status Labels",
      url: "#status-labels",
    },
    {
      name: "Avatar",
      url: "#avatar",
    },
    {
      name: "Switches",
      url: "#switches",
    },
    {
      name: "Checkboxes",
      url: "#checkboxes",
    },
    {
      name: "Radio",
      url: "#radio",
    },
    {
      name: "Table",
      url: "#table",
    },
    {
      name: "Tabs",
      url: "#tabs",
    },
    {
      name: "Date Picker",
      url: "#date-picker",
    },
    {
      name: "Stepper",
      url: "#stepper",
    },
    {
      name: "Section",
      url: "#section",
    },
  ];

  const theme = useTheme();

  // *********************************
  // Redux Demo
  // *********************************
  const monitorState = useSelector((state) => state.monitors);
  const { monitors, msg } = monitorState;

  //Button Spinner state
  const [isLoading, setIsLoading] = useState(false);
  const handleButtonSpinnerClick = () => {
    setIsLoading(true);

    setTimeout(() => {
      setIsLoading(false);
    }, 4000);
  };
  return (
    <div>
      <div style={{ padding: "4rem", border: "1px solid black" }}>
        <Typography variant="h4">Redux Demo</Typography>
        <Typography variant="h6">Monitors</Typography>
        <table
          style={{ border: "1px solid black", borderCollapse: "collapse" }}
        >
          <tbody>
            <tr>
              <th style={{ border: "1px solid black" }}>Name</th>
              <th style={{ border: "1px solid black" }}>URL</th>
            </tr>
            {monitors &&
              monitors.map((monitor) => {
                return (
                  <tr key={monitor._id}>
                    <td style={{ border: "1px solid black" }}>
                      {monitor.name}
                    </td>
                    <td style={{ border: "1px solid black" }}>{monitor.url}</td>
                  </tr>
                );
              })}
          </tbody>
        </table>
        <p>Message: {msg}</p>
        <Button
          level="primary"
          label="Get Monitors"
          onClick={() => {
            dispatch(getMonitorsByUserId("User ID Here"));
          }}
        />
      </div>
      <ul style={{ listStyle: "none" }}>
        {links.map((link) => (
          <li key={link.url}>
            <Link level="primary" label={link.name} url={link.url} />
          </li>
        ))}
      </ul>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="buttons">Buttons</h4>
      <div>
        <Button level="primary" label="Primary" />
        <Button level="secondary" label="Secondary" />
        <Button level="tertiary" label="Tertiary" />
        <Button level="error" label="Error" />
        <Button level="imageTertiary" label="Image Button" img={<AddIcon />} />
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="disabled-buttons">Disabled Buttons</h4>
      <div>
        <Button level="primary" label="Primary" disabled />
        <Button level="secondary" label="Secondary" disabled />
        <Button level="tertiary" label="Tertiary" disabled />
        <Button level="error" label="Error" disabled />
      </div>
      <div>
        <Link
          level="tertiary"
          label="Tertiary Link"
          url={"https://www.google.com"}
        />
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="labels">Labels</h4>
      <div>
        <ColoredLabel label="Label" color={theme.palette.labelGray.color} />
        <ColoredLabel label="Label" color={theme.palette.labelPurple.color} />
        <ColoredLabel label="Label" color={theme.palette.labelGreen.color} />
        <ColoredLabel label="Label" color={theme.palette.labelOrange.color} />
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="status-labels">Status Lables</h4>
      <div>
        <StatusLabel status="Seen" />
        <StatusLabel status="Waiting" />
        <StatusLabel status="New" />
        <StatusLabel status="Active" />
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="avatar">Avatar</h4>
      <div style={{ display: "flex" }}>
        <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
        <Avatar firstName="Alex" lastName="Holliday" />
        <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" small />
        <Avatar firstName="Alex" lastName="Holliday" small />
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="switches">Switches</h4>
      <div>
        <Switch onChange={(event) => change(event, "Switch")} />
        <Switch size="small" />
        <Switch disabled />
        <Switch checked />
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="checkboxes">Checkboxes</h4>
      <div>
        <Checkbox onChange={(event) => change(event, "Checkbox")} />
        <Checkbox size="small" />
        <Checkbox disabled />
        <Checkbox checked />
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="radio">Radio</h4>
      <div>
        <FormControl>
          <FormLabel>Demo Radio</FormLabel>
          <RadioGroup value={radio} onChange={handleRadio}>
            <div>
              <FormControlLabel value={1} control={<Radio />} label="1" />
              <FormControlLabel value={2} control={<Radio />} label="2" />
              <FormControlLabel
                value={3}
                control={<Radio size="small" />}
                label="3"
              />
              <FormControlLabel
                value={4}
                control={<Radio disabled />}
                label="4"
              />
            </div>
          </RadioGroup>
        </FormControl>
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="table">Table</h4>
      <div style={{ width: "75vw" }}>
        <DataGrid
          autoHeight
          columns={cols}
          rows={rows}
          initialState={{
            pagination: {
              paginationModel: { page: 0, pageSize: 10 },
            },
          }}
          pageSizeOptions={[5, 10]}
        />
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="tabs">Tabs</h4>
      <div style={{ display: "flex", justifyContent: "center" }}>
        {" "}
        <Tabs value={tab} onChange={handleTab}>
          <Tab label="My details" value="details" />
          <Tab label="My team" value="team" />
          <Tab label="Departments" value="departments" />
          <Tab label="Approvals" value="approvals" />
        </Tabs>
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="date-picker">Date Picker</h4>
      <div>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DatePicker onChange={handleDate} />
        </LocalizationProvider>
        <h4>{date}</h4>
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="stepper">Stepper</h4>
      <div>
        <ProgressStepper steps={steps}></ProgressStepper>
      </div>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="section">Section</h4>
      <Section monitors={demoMonitors} />
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <h4 id="section">Loading Buttons</h4>
      <Stack direction="row" justifyContent="center" spacing={3}>
        <ButtonSpinner
          level="primary"
          label="Submit"
          onClick={handleButtonSpinnerClick}
          isLoading={isLoading}
        />
        <ButtonSpinner
          level="secondary"
          label="Fetch Data"
          loadingText="Fetching..."
          onClick={handleButtonSpinnerClick}
          isLoading={isLoading}
        />
        <ButtonSpinner
          level="tertiary"
          label="Add"
          loadingText="Adding..."
          onClick={handleButtonSpinnerClick}
          isLoading={isLoading}
        />
        <ButtonSpinner
          level="primary"
          label="Upload"
          position="start"
          img={<UploadIcon />}
          onClick={handleButtonSpinnerClick}
          isLoading={isLoading}
        />
        <ButtonSpinner
          level="secondary"
          label="Send"
          position="end"
          img={<SendIcon />}
          onClick={handleButtonSpinnerClick}
          isLoading={isLoading}
        />
        <ButtonSpinner
          level="error"
          label="Disabled"
          onClick={handleButtonSpinnerClick}
          isLoading={isLoading}
          disabled={true}
        />
      </Stack>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <Stack justifyContent="center" alignItems="center">
        <ImageField
          id="test-image-field"
          onChange={() => console.log("changed")}
        />
      </Stack>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <Stack justifyContent="center" alignItems="center">
        <ProgressUpload
          icon={<ImageIcon />}
          label="image.jpg"
          size="2 MB"
          progress={50}
          onClick={() => console.log("click")}
        />
      </Stack>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <Stack justifyContent="center" alignItems="center">
        <Box width="500px">
          <Alert
            variant="info"
            title="SSO login"
            body="Since you logged in via SSO, you cannot reset or modify your password."
          />
        </Box>
        <Box width="500px" mt="5px">
          <Alert
            variant="warning"
            body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
          />
        </Box>
        <Box width="500px" mt="5px">
          <Alert
            variant="error"
            title="Error"
            body="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
          />
        </Box>
        <Box width="500px" mt="5px">
          <Alert
            variant="info"
            title="We've just released a new feature"
            body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor."
            isToast={true}
          />
        </Box>
        <Box width="500px" mt="5px">
          <Alert
            variant="info"
            body="Your password is incorrect."
            isToast={true}
            hasIcon={false}
          />
        </Box>
        <Box width="500px" mt="5px">
          <Button
            level="primary"
            label="Toast"
            onClick={() =>
              createToast({
                variant: "info",
                body: "Your password is incorrect.",
                hasIcon: false,
              })
            }
          />
        </Box>
      </Stack>
      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
      <ToastContainer />
    </div>
  );
};
export default Demo;