use web_sys::window;
use yew::prelude::*;

pub struct FindMe;
impl Component for FindMe {
  type Message = ();
  type Properties = ();

  fn create(_ctx: &Context<Self>) -> Self {
    Self
  }

  fn view(&self, _ctx: &Context<Self>) -> Html {
    let clipboard = window().expect("meow").navigator().clipboard();

    let handle_copy_matrix = {
      let clipboard = clipboard.clone();
      Callback::from(move |_| {
        let _ = clipboard.write_text(&*"@iouring:hi.stellaris.fyi".to_string());
      })
    };

    let handle_copy_telegram = {
      let clipboard = clipboard.clone();
      Callback::from(move |_| {
        let _ = clipboard.write_text(&*"@luc1ell3".to_string());
      })
    };

    let handle_copy_discord = {
      let clipboard = clipboard.clone();
      Callback::from(move |_| {
        let _ = clipboard.write_text(&*"@donotusedisc0rdkthxbye".to_string());
      })
    };

    html! {
      <div style="
        display: flex !important;
        flex-direction: row !mportant;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
      ">
        <div style="
          width: fit-content !important;
          height: fit-content !important;
          margin: 1rem 1rem 1rem 1rem !important;
        ">
          <p style="
            font-weight: bold !important;
            font-style: normal !important;
            font-size: xx-large !important;
            text-align: center !important;
            margin: unset !important;
          ">{r"follow us"}</p>
          <p style="
            font-weight: normal !important;
            font-style: normal !important;
            font-size: large !important;
          ">{"　× "}<a style="
              color: #F5C2E7FF !important;
            " href="https://ice.stellaris.fyi/@iouring">{r"fediverse"}</a><br />
            {"　× "}<a style="
              color: #B4BEFEFF !important;
            " href="https://bsky.app/profile/i0ur.ing">{r"bluesky"}</a><br />
          </p>
        </div>
        <div style="
          width: fit-content !important;
          height: fit-content !important;
          margin: 1rem 1rem 1rem 1rem !important;
        ">
          <p style="
            font-weight: bold !important;
            font-style: normal !important;
            font-size: xx-large !important;
            text-align: center !important;
            margin: unset !important;
          ">{r"write us"}</p>
          <p style="
            font-weight: normal !important;
            font-style: normal !important;
            font-size: large !important;
          ">
            {"× "}
            <button style="
              color: #94E2D5FF !important;
              font-size: large !important;
            " onclick={handle_copy_matrix}>{r"matrix"}</button>
            <br />
            {"× "}
            <button style="
              color: #B4BEFEFF !important;
              font-size: large !important;
            " onclick={handle_copy_telegram}>{r"telegr"}</button>
            <br />
            {"× "}
            <button style="
              color: #F38BA8FF !important;
              font-size: large !important;
            " onclick={handle_copy_discord}>{r"ewcord"}</button>
          </p>
        </div>
        <div style="
          width: fit-content !important;
          height: fit-content !important;
          margin: 1rem 1rem 1rem 1rem !important;
        ">
          <p style="
            font-weight: bold !important;
            font-style: normal !important;
            font-size: xx-large !important;
            text-align: center !important;
            margin: unset !important;
          ">{r"git gud"}</p>
          <p style="
            font-weight: normal !important;
            font-style: normal !important;
            font-size: large !important;
          ">{"　× "}<a style="
              color: #F5C2E7FF !important;
            " href="https://git.celesteflare.cc/i0uring">{r"my own!!!"}</a><br />
            {"　× "}<a style="
              color: #CBA6F7FF !important;
            " href="https://git.gay/luciel">{r"the gay one"}</a><br />
            {"　× "}<a style="
              color: #B4BEFEFF !important;
            " href="https://git.rimuru.club/i0uring">{r"git of fren"}</a><br />
            {"　× "}<a style="
              color: #89B4FAFF !important;
            " href="https://codeberg.org/i0uring">{r"a mountain what"}</a>
          </p>
        </div>
      </div>
    }
  }
}